<template>
  <div class="body_bgc full">
    <div class="relative">
      <div class="header_bgi w_full h_100 lh_100 bgs_full relative">
        <!-- <div class="w_27_p h_35 absolute_center title_bgi"></div> -->
        <div class="main_color font_zh fs_30 text_center ls_2 jian_bian_text_1">巴音布拉尔嘎查智慧化联合牧场数据平台</div>
      </div>

      <div class="w_300 h_30 fs_20 color_fff absolute right_10 top_10 z_999 font_number">
        {{ current_time }}  {{ getWeekday() }}
      </div>
    </div>

    <div class="w_full h_full-140 flex_row_between p_5 ph_10">
      <!-- 1 -->
      <div class="w_24_5_p h_full flex_column_around">
        <!-- 牧户信息 -->
        <div class="w_full h_24_p p_2 chart_box">
          <div class="w_full flex_row_start flex_center pl_10">
            <div class="w_15 h_15 title_icon"></div> 
            <div class="chart_title_text cursor">基本信息</div>
          </div>
          
          <div class="w_full h_full-40 relative flex_row_start">
            <div class="w_35_p relative top_7">
              <el-image 
                class="h_140 border_radius_10 absolute top_0 left_20"
                :src="altzb" 
              >
              </el-image>
            </div>

            <div class="w_60_p h_full">
              <div class="color_cdcdcd fs_18 pv_2">牧场名称：艾乐智慧牧场</div>
              <!-- <div class="color_cdcdcd fs_18 pv_2">牧户：阿拉腾扎布</div> -->
              <div class="color_cdcdcd fs_18 pv_2">电话： {{ formatPhone('13904709077') }}</div>
              <div class="color_cdcdcd fs_18 pv_2 cursor" @click="showBaiDuMap = true">地址：呼伦贝尔市鄂温克旗</div>
              <div class="color_cdcdcd fs_18 pv_2">监控数量：21</div>
              <div class="color_cdcdcd fs_18 pv_2">设备数量：23</div>
            </div>
          </div>
        </div>

        <!-- 棚圈信息 -->
        <div class="w_full h_24_p p_2 chart_box">
          <div class="w_full flex_row_start flex_center pl_10 mb_10">
            <div class="w_15 h_15 title_icon"></div> 
            <div class="chart_title_text cursor">环境检测</div>
          </div>

          <div class="w_full h_full-30 flex_row_start flex_wrap gap_10 pl_10" v-if="registerList && registerList.length">
            <div class="w_48_p h_20 lh_20 main_color cursor" v-for="(item, index) in registerList" :key="index" @click="clickDevice(item)">
              <span class="color_fff">{{ item.registerName }}: </span>
              {{  item.data + ' ' + item.unit }}
            </div>
          </div>
        </div>

        <!-- 饲料统计、饲料消耗 -->
        <div class="w_full h_50_p p_2">
          <div class="full chart_box relative">
            <!-- 饲料统计 -->
            <div class="w_full h_40_p cursor" @click="clickSiLiaoBox()">
              <div class="w_full flex_row_start flex_center pl_10">
                <div class="w_15 h_15 title_icon"></div> 
                <div class="chart_title_text cursor" >饲料统计</div>
              </div>

              <div class="w_full h_full-30 ph_10 mb_10">
                <div class="w_full flex_row_around fw_bold fs_15 main_color">
                  <div class="w_30_p text_left">名称</div>
                  <div class="w_30_p text_center">剩余（KG）</div>
                  <div class="w_30_p text_right">预计天数</div>
                </div>

                <div class="w_full flex_row_around ">
                  <div class="w_30_p text_left color_eee">精饲料</div>
                  <div class="w_30_p text_center color_eee">984</div>
                  <div class="w_30_p text_right color_eee">56</div>
                </div>

                <div class="w_full flex_row_around">
                  <div class="w_30_p text_left color_eee">干草</div>
                  <div class="w_30_p text_center color_eee">3252</div>
                  <div class="w_30_p text_right color_eee">53</div>
                </div>

                <div class="w_full flex_row_around">
                  <div class="w_30_p text_left color_eee">青储</div>
                  <div class="w_30_p text_center color_eee">0</div>
                  <div class="w_30_p text_right color_eee">0</div>
                </div>
              </div>
            </div>

            <div class="w_90_p m_0_auto border_b_0_5_s_5f6163"></div>
            
            <!-- 饲料消耗 -->
            <div class="w_full h_60_p flex_column_between">
              <div class="w_full flex_row_start flex_center pl_10">
                <div class="w_15 h_15 title_icon"></div> 
                <div class="chart_title_text cursor" @click="showXiaoHao = true">饲料消耗</div>
              </div>

              <div class="w_full h_full-50">
                <line-chart class="full" :value="lineData" />
              </div>

              <div class="w_full flex_row_between ph_10 fs_14">
                <div class="flex_row_start color_fff border_radius_7 bgc_141820">
                  <div 
                    class="ph_10 color_6b7079 cursor" 
                    :class="{'active_btn' : chart_1_category_type == 1 }"
                    @click="changeChart1CategoryType(1, chart_1_time)"
                  >全部
                  </div>
                  <div 
                    class="ph_10 color_6b7079 cursor"
                    :class="{'active_btn' : chart_1_category_type == 2 }"
                    @click="changeChart1CategoryType(2, chart_1_time)"
                    >精饲料
                  </div>
                  <div 
                    class="ph_10 color_6b7079 cursor"
                    :class="{'active_btn' : chart_1_category_type == 3 }"
                    @click="changeChart1CategoryType(3, chart_1_time)"
                    >干草
                  </div>
                  <div 
                    class="ph_10 color_6b7079 cursor"
                    :class="{'active_btn' : chart_1_category_type == 4 }"
                    @click="changeChart1CategoryType(4, chart_1_time)"
                    >青储
                  </div>
                </div>

                <div class="flex_row_start color_fff border_radius_7 bgc_141820">
                  <div 
                    class="ph_10 color_6b7079 cursor"
                    :class="{'active_btn' : chart_1_time == 'year' }"
                    @click="changeChart1TimeType(chart_1_category_type, 'year')"
                  >年
                  </div>
                  <div 
                    class="ph_10 color_6b7079 cursor"
                    :class="{'active_btn' : chart_1_time == 'month' }"
                    @click="changeChart1TimeType(chart_1_category_type, 'month')"
                  >月
                  </div>
                  <div 
                    class="ph_10 color_6b7079 cursor"
                    :class="{'active_btn' : chart_1_time == 'day' }"
                    @click="changeChart1TimeType(chart_1_category_type, 'day')"
                  >天
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 2 -->
      <div class="w_50_p h_full flex_column_around">
        <!-- 监控视频 -->
        <div class="w_full h_60_p p_2">
          <div class="chart_box full">
            <div class="video_box full m_0_auto">
              <play-video />
            </div>
          </div>
        </div>
        
        <!-- 设备 -->
        <div class="w_full h_40_p flex_row_between">
          <!-- 智慧化生产 -->
          <div class="w_50_p p_2">
            <div class="full chart_box">
              <div class="w_full flex_row_start flex_center pl_5">
                <div class="w_15 h_15 title_icon"></div> 
                <div class="chart_title_text" @click="showSiWei = true">智慧化生产</div>
              </div>

              <div class="w_full h_full-30">
                <div class="w_full h_full flex_wrap scroll_box overflow_y_auto">
                  <div class="w_50_p h_50_p p_3 cursor" v-for="(item, index) in sheBeiList1" :key="index">
                    <div class="full bgc_3D4454 border_radius_10 p_5">
                      <div class="w_full h_30 flex_row_between">
                        <div class="w_full-50 pl_10 fs_14">
                          <span class="color_eee mr_20">{{item.name}}</span>
                          <span :class="[item.isRun ? 'color_green' : 'color_ccc']" v-if="index != 1">{{ item.isRun ? '(运行中)' : '(待命中)'}}</span> 
                        </div>

                        <div class="w_50 h_20 relative" v-if="index != 1">
                          <div class="w_40 h_full text_center absolute top_0 left_center color_fff cursor">
                            <el-switch
                              v-model="item.isRun"
                              active-color="#E8CEB8"
                              inactive-color="#181D2A"
                              disabled
                              @change="handleChangeHardware($event, item)">
                            </el-switch>
                          </div> 
                        </div>
                      </div>  
                      
                      <div class="w_full h_full-30 text_center p_5" @click="clickSheBei(item)">
                        <img class="h_full fit_contain" :src="item.img" alt="">
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- 智能监管 -->
          <div class="w_50_p p_2">
            <div class="full chart_box">
              <div class="w_full flex_row_start flex_center pl_5">
                <div class="w_15 h_15 title_icon"></div> 
                <div class="chart_title_text" @click="showSiWei = true">智能监管</div>
              </div>

              <div class="w_full h_full-30">
                <div class="w_full h_full flex_wrap scroll_box overflow_y_auto">
                  <div class="w_50_p h_50_p p_3 cursor" v-for="(item, index) in sheBeiList2" :key="index">
                    <div class="full bgc_3D4454 border_radius_10 p_5">
                      <div class="w_full h_30 flex_row_between">
                        <div class="w_full-50 pl_10 fs_14">
                          <span class="color_eee mr_20">{{item.name}}</span>
                          <span :class="[item.state == 1 ? 'color_green' : 'color_ccc']">{{ item.state == 1 ? '(运行中)' : '(待命中)'}}</span> 
                        </div>

                        <div class="w_50 h_20 relative">
                          <div class="w_40 h_full text_center absolute top_0 left_center color_fff cursor">
                            <el-switch
                              v-model="item.state"
                              active-color="#E8CEB8"
                              inactive-color="#181D2A"
                              disabled
                              @change="handleChangeHardware($event, item)">
                            </el-switch>
                          </div> 
                        </div>
                      </div>  
                      
                      <div class="w_full h_full-30 text_center p_5" @click="clickSheBei(item)">
                        <img class="h_full fit_contain" :src="item.img" alt="">
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 3 -->
      <div class="w_25_p h_full p_2">
        <div class="full chart_box">
          <!-- 牲畜种类 -->
          <div class="w_full h_40 lh_40 border_b_0_5_s_5f6163 flex_row_around1">
            <div class="w_full flex_row_start flex_center pl_10">
              <div class="w_15 h_15 title_icon"></div> 
              <div class="chart_title_text">养殖羊信息 343</div>
            </div>
          </div>

          <div class="w_full h_full-40 p_5 relative">
            <div class="full scroll_box overflow_y_auto" v-if="cattleList && cattleList.length">
              <div 
                class="w_full bgc_3D4454 border_radius_5 mt_5 p_10" 
                v-for="(item, index) in cattleList" :key="index"
              >
                <!-- 牲畜基本信息 -->
                <div class="w_full flex_row_around">
                  <div class="w_full flex_column_between p_5">
                    <div class="w_full flex_row_between sub_border pl_10">
                      <div class="w_150 color_cdcdcd ">种羊场</div>
                      <div class="flex_grow_1 color_cdcdcd">鄂温克族自治旗巴音布拉尔合作社</div>
                    </div>

                    <div class="w_full flex_row_between sub_border pl_10">
                      <div class="w_150 color_cdcdcd">rfid</div>
                      <div class="flex_grow_1 color_cdcdcd">{{ item.earNum }}</div>
                    </div>

                    <div class="w_full flex_row_between flex_wrap">
                      <div class="w_33_3_p sub_border pl_10">
                        <span class="color_cdcdcd">体高:</span>
                        <span class="main_color pl_10">{{ item.bodyHeight }}cm</span>
                      </div>
                      <div class="w_33_3_p sub_border pl_10">
                        <span class="color_cdcdcd">体斜长:</span>
                        <span class="main_color pl_10">{{ item.bodyLength }}cm</span>
                      </div>
                      <div class="w_33_3_p sub_border pl_10">
                        <span class="color_cdcdcd">体重:</span>
                        <span class="main_color pl_10">{{ item.weight }} kg</span>
                      </div>
                      <div class="w_33_3_p sub_border pl_10">
                        <span class="color_cdcdcd">管围:</span>
                        <span class="main_color pl_10">{{ item.cannonBone }} cm</span>
                      </div>
                      <div class="w_33_3_p sub_border pl_10">
                        <span class="color_cdcdcd">胸深:</span>
                        <span class="main_color pl_10">{{ item.chestDepth }} cm</span>
                      </div>
                      <div class="w_33_3_p sub_border pl_10">
                        <span class="color_cdcdcd">胸围:</span>
                        <span class="main_color pl_10">{{ item.chestSize }} cm</span>
                      </div>
                      <div class="w_full sub_border pl_10">
                        <span class="color_cdcdcd">十字部高:</span>
                        <span class="main_color pl_10">{{ item.hipCross }} cm</span>
                      </div>
                    </div>

                    <div class="w_full flex_row_between sub_border pl_10" v-if="item.measureTime">
                      <div class="w_150 color_cdcdcd">测量日期</div>
                      <div class="flex_grow_1 color_cdcdcd" >{{ item.measureTime }}</div>
                    </div>

                    <div class="w_full flex_row_between">
                      <div class="color_cdcdcd" v-if="item.disc == '母羊'">育种次数</div>
                      <div class="color_cdcdcd" v-if="item.disc == '公羊'">配种次数</div>
                      <div class="color_cdcdcd" v-if="item.disc == '犊羊'"></div>
                      <div class="color_cdcdcd" v-if="item.disc == '母羊' || item.disc == '公羊'">{{ item.yu_zhong_count }}</div>
                    </div>

                    <!-- 品种 -->
                    <div class="w_full flex_row_around mt_10">
                      <div class="w_40_p h_31 lh_31 text_center bgc_202836 main_color border_l_radius_5 fs_14">
                        品种：短尾羊
                      </div>
                      <div class="w_60_p h_30 lh_30 text_center main_bgc cursor border_r_radius_5 fs_14" @click="clickSheep(item)">
                        谱系档案
                      </div>
                    </div>
                  </div>
                </div>

                <!-- 数据记录 -->
                <div class="w_full h_40 lh_40 flex_row_between">
                  <div 
                    class="w_25_p text_center main_color cursor" 
                    :class="{active_color : active_cattle_index == index && active_records_index == 0}"
                    @click="handleClickRecordName(index, 0)"
                  >
                    成长记录
                    <img 
                      class="w_10 h_10" 
                      :class="active_cattle_index == index && active_records_index == 0 ? 'show' : 'flod'" 
                      :src="icon_right" alt=""
                    >
                  </div>
                  <div class="color_8e9299">|</div>
                  <div 
                    class="w_25_p text_center main_color cursor" 
                    :class="{active_color : active_cattle_index == index && active_records_index == 1}"
                    @click="handleClickRecordName(index, 1)"
                  >
                    防疫记录
                    <img 
                      class="w_10 h_10" 
                      :class="active_cattle_index == index && active_records_index == 1 ? 'show' : 'flod'" 
                      :src="icon_right" alt=""
                    >
                  </div>
                  <div class="color_8e9299">|</div>
                  <div 
                    class="w_25_p text_center main_color cursor" 
                    :class="{active_color : active_cattle_index == index && active_records_index == 2}"
                    v-if="item.disc == '母羊' || item.disc == '公羊'"
                    @click="handleClickRecordName(index, 2)"
                  >
                    <span v-if="item.disc == '母羊'">育种记录</span>
                    <span v-else>配种记录</span>
                    <img 
                      class="w_10 h_10 ml_5" 
                      :class="active_cattle_index == index && active_records_index == 2 ? 'show' : 'flod'" 
                      :src="icon_right" alt=""
                    >
                  </div>
                  <div class="color_8e9299" v-if="item.disc == '母羊' || item.disc == '公羊'">|</div>
                  <div 
                    class="w_25_p text_center main_color cursor" 
                    :class="{active_color : active_cattle_index == index && active_records_index == 3}"
                    @click="handleClickRecordName(index, 3)"
                  >
                    交易记录
                    <img 
                      class="w_10 h_10" 
                      :class="active_cattle_index == index && active_records_index == 3 ? 'show' : 'flod'" 
                      :src="icon_right" alt=""
                    >
                  </div>
                </div>

                <!-- 记录数据 -->
                <div 
                  class="w_full p_10" 
                  v-if="active_cattle_index == index && active_records_index !== null"
                >
                  <!-- 成长记录 （线型图） -->
                  <div 
                    class="w_full h_150"
                    :class="{animate_flod : active_records_index == null}"
                    v-if="active_cattle_index == index && active_records_index == 0"
                  >
                    <line-chart class="full" :value="formatCattleGrowData(item.weight)" />
                  </div>

                  <!-- 防疫记录 （表格） -->
                  <div 
                    class="w_full h_150 scroll_box overflow_y_auto color_cdcdcd" 
                    v-if="active_cattle_index == index && active_records_index == 1"
                  >
                    <div class="w_full h_30 lh_30 flex_row_start">
                      <div class="w_40_p text_center border_t_x_1_s_ccc">免疫日期</div>
                      <div class="w_60_p text_center border_t_r_1_s_ccc">疫苗名称</div>
                    </div>

                    <div class="w_full h_30 lh_30 flex_row_start">
                      <div class="w_40_p text_center border_t_x_1_s_ccc">2025-04-12</div>
                      <div class="w_60_p text_center border_t_r_1_s_ccc">口蹄疫0A</div>
                    </div>

                    <div class="w_full h_30 lh_30 flex_row_start">
                      <div class="w_40_p text_center border_t_x_1_s_ccc">2024-04-17</div>
                      <div class="w_60_p text_center border_t_r_1_s_ccc">小反刍</div>
                    </div>

                    <div class="w_full h_30 lh_30 flex_row_start">
                      <div class="w_40_p text_center border_1_s_ccc">2024-09-18</div>
                      <div class="w_60_p text_center border_t_r_b_1_s_ccc">口蹄疫0A</div>
                    </div>
                  </div>

                  <!-- 育种记录 （表格） -->
                  <div 
                    class="w_full h_150 scroll_box overflow_y_auto color_cdcdcd" 
                    v-if="active_cattle_index == index && active_records_index == 2 && item.mian_yi_count"
                  >
                    <div class="w_full h_30 lh_30 flex_row_start">
                      <div class="w_40_p text_center border_t_x_1_s_ccc">
                        <span v-if="item.disc == '母羊'">育种日期</span>
                        <span v-if="item.disc == '公羊'">配种日期</span>
                      </div>
                      <div class="w_60_p text_center border_t_r_1_s_ccc">冻精编号</div>
                    </div>

                    <div class="w_full h_30 lh_30 flex_row_start">
                      <div class="w_40_p text_center border_t_x_1_s_ccc">2023-05-19</div>
                      <div class="w_60_p text_center border_t_r_1_s_ccc">dj4353543445</div>
                    </div>

                    <div class="w_full h_30 lh_30 flex_row_start">
                      <div class="w_40_p text_center border_t_x_1_s_ccc">2022-07-21</div>
                      <div class="w_60_p text_center border_t_r_1_s_ccc">dj663353534</div>
                    </div>

                    <div class="w_full h_30 lh_30 flex_row_start">
                      <div class="w_40_p text_center border_1_s_ccc">2021-04-09</div>
                      <div class="w_60_p text_center border_t_r_b_1_s_ccc">dj973753534</div>
                    </div>
                  </div>


                  <!-- 交易记录 （表格） -->
                  <div 
                    class="w_full h_150 lh_150 text_center color_cdcdcd"
                    :class="{animate_flod : active_records_index == null}"
                    v-if="active_cattle_index == index && active_records_index == 3"
                  > 暂无交易记录
                  </div>
                </div>
              </div>
            </div>

            <div class="absolute_center main_color fw_bold ls_3" v-else>
              该牧户暂无牲畜信息
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- footer -->
    <div class="w_full h_40 relative">
      <div class="w_10_p h_34 absolute left_center top_0 footer_bgi"></div>
    </div>

    <!-- ----------------------- Dialog --------------------- -->
    <!-- 地图 -->
    <el-dialog
      :visible.sync="showBaiDuMap"
      width="50%"
    >
      <div class="w_full h_500">
        <bai-du-map :pointList="userPoint" />
      </div>
    </el-dialog>

    <!-- 环境检测 -->
    <el-dialog
      title="环境检测"
      :visible.sync="showPengJuan"
      width="85%"
    >
      <div class="w_full flex_row_start gap_10 flex_center pl_30">
        <div class="w_120 h_30 lh_30 text_center cursor" :class="[activeTimeType == 1 ? 'main_btn' : 'sub_btn' ]" @click="selectTime(1, 1, 0)">前 1 小时</div>
        <div class="w_120 h_30 lh_30 text_center cursor" :class="[activeTimeType == 2 ? 'main_btn' : 'sub_btn' ]" @click="selectTime(2, 3, 0)">前 3 小时</div>
        <div class="w_120 h_30 lh_30 text_center cursor" :class="[activeTimeType == 3 ? 'main_btn' : 'sub_btn' ]" @click="selectTime(3, 5, 0)">前 5 小时</div>
        <div class="w_120 h_30 lh_30 text_center cursor" :class="[activeTimeType == 4 ? 'main_btn' : 'sub_btn' ]" @click="selectTime(4, 0, 1)">前 1 天</div>

        <div class=" flex_row_start gap_10 flex_center color_fff">起止时间:
          <el-date-picker
            v-model="date"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            value-format="yyyy-MM-dd HH:mm:ss"
            @change="dateChange">
          </el-date-picker>
        </div>
      </div>

      <div class="w_full h_500 fs_24 flex_row_start chart_box flex_wrap">
        <div class="w_full flex_row_start flex_center pl_10">
          <div class="w_15 h_15 title_icon"></div> 
          <div class="chart_title_text cursor" @click="showXiaoHao = true">{{ activeDevice.name }}历史数据</div>
        </div>

        <div class="w_full h_full-50">
          <line-chart class="full" :value="deviceHistoryChart" />
        </div>
      </div>
    </el-dialog>

    <!-- 饲料统计 -->
    <el-dialog
      title="饲草库监控"
      :visible.sync="showSiLiao"
      width="50%"
    >
      <div class="w_full h_500">
        <div class="video_box full m_0_auto">
          <play-video />
        </div>
      </div>
    </el-dialog>

    <!-- 饲料消耗 -->
    <el-dialog
      title="饲料消耗"
      :visible.sync="showXiaoHao"
      width="50%"
    >
      <div class="w_full h_500 fs_24 flex_row_start flex_wrap">
        <div class="w_50_p h_50_p bgc_1c1c1c border_1_s_fff">
          <div class="w_full flex_row_start flex_center pl_10">
            <div class="w_15 h_15 title_icon"></div> 
            <div class="chart_title_text cursor" @click="showXiaoHao = true">精饲料消耗</div>
          </div>

          <div class="w_full h_full-50">
            <line-chart class="full" :value="lineData" />
          </div>
        </div>

        <div class="w_50_p h_50_p bgc_1c1c1c border_1_s_fff">
          <div class="w_full flex_row_start flex_center pl_10">
            <div class="w_15 h_15 title_icon"></div> 
            <div class="chart_title_text cursor" @click="showXiaoHao = true">干草消耗</div>
          </div>

          <div class="w_full h_full-50">
            <line-chart class="full" :value="lineData2" />
          </div>
        </div>

        <div class="w_50_p h_50_p bgc_1c1c1c border_1_s_fff">
          <div class="w_full flex_row_start flex_center pl_10">
            <div class="w_15 h_15 title_icon"></div> 
            <div class="chart_title_text cursor" @click="showXiaoHao = true">清储消耗</div>
          </div>

          <div class="w_full h_full-50">
            <line-chart class="full" :value="lineData3" />
          </div>
        </div>

        <div class="w_50_p h_50_p bgc_1c1c1c border_1_s_fff">
          <div class="w_full flex_row_start flex_center pl_10">
            <div class="w_15 h_15 title_icon"></div> 
            <div class="chart_title_text cursor" @click="showXiaoHao = true">玉米消耗</div>
          </div>

          <div class="w_full h_full-50">
            <line-chart class="full" :value="lineData4" />
          </div>
        </div>
      </div>
    </el-dialog>

    <!-- 撒料车 -->
    <div v-show="showSaLiaoChe" class="full absolute top_0 lrft_0 bgc_000000c2">
      <div class="w_70_p bgc_3D4454 absolute_center z_999999 p_40">
        <div class="w_30 h_30 absolute top_10 right_10 cursor" @click="hideSaLiaoCheDialog()">
          <img class="full" src="../assets/images/chart-box/cancel.png" alt="">
        </div>

        <div class="fw_bold color_fff fs_26 mb_30">自动撒料</div>
        <div class="w_full h_500 fs_24">
          <div class="full flex_row_start">
            <!-- left -->
            <div class="w_40_p h_full fs_24 scroll_box overflow_y_auto">
              <div class="w_full flex_row_start">
                <div class="w_200 h_200">
                  <img class="w_full fit_cover" src="../assets/images/she-bei/sa-liao-che.png" alt="">
                </div>

                <div class="w_400 pl_20 color_fff">
                  <div class="" v-if="sheBeiList1[0].info && sheBeiList1[0].info.deriveMetadata && sheBeiList1[0].info.deriveMetadata.functions && sheBeiList1[0].info.deriveMetadata.functions.length">
                    <div class="flex_row_start flex_center gap_10" v-for="(item, index) in sheBeiList1[0].info.deriveMetadata.functions" :key="index">
                      <div class="w_160 color_fff">{{ item.name }}： </div>
                      <el-tooltip content="该操作会更新设备的运行状态！操作前需谨慎！" placement="top">
                        <el-switch
                          v-model="item.xxState"
                          :loading="true"
                          active-color="#E8CEB8"
                          inactive-color="#181D2A"
                          @change="handleChangeSLCxxState($event, item, sheBeiList1[0].info.deviceId, sheBeiList1[0].info.productId, index)">
                        </el-switch>
                      </el-tooltip>
                      <span class="ml_10" :class="[item.xxState ? 'color_green' : 'color_ccc']">{{ item.xxState ? '运行中' : '关闭中' }} </span>
                    </div>
                  </div>
                </div>
              </div>

              <div class="w_full flex_row_start">
                <div class="w_full pl_20 color_fff">
                  <div class="flex_row_start pt_10">
                    <div class="w_160 text_center border_1_s_ccc ph_20 fs_20">运行时间</div>
                    <div class="w_160 text_center border_1_s_ccc ph_20 fs_20">结束时间</div>
                    <div class="w_160 text_center border_1_s_ccc ph_20 fs_20">运行状态</div>
                  </div>
                  <div class="flex_row_start">
                    <div class="w_160 border_1_s_ccc ph_20 fs_17">2025-08-26 16:12:43</div>
                    <div class="w_160 border_1_s_ccc ph_20 fs_17">2025-08-26 18:35:45</div>
                    <div class="w_160 h_53 lh_53 text_center border_1_s_ccc ph_20 fs_17">正常</div>
                  </div>
                  <div class="flex_row_start">
                    <div class="w_160 border_1_s_ccc ph_20 fs_17">2025-08-25 16:46:12</div>
                    <div class="w_160 border_1_s_ccc ph_20 fs_17">2025-08-25 18:13:34</div>
                    <div class="w_160 h_53 lh_53 text_center border_1_s_ccc ph_20 fs_17">正常</div>
                  </div>
                  <div class="flex_row_start">
                    <div class="w_160 border_1_s_ccc ph_20 fs_17">2025-08-23 10:09:45</div>
                    <div class="w_160 border_1_s_ccc ph_20 fs_17">2025-08-23 11:25:13</div>
                    <div class="w_160 h_53 lh_53 text_center border_1_s_ccc ph_20 fs_17">正常</div>
                  </div>
                  <div class="flex_row_start">
                    <div class="w_160 border_1_s_ccc ph_20 fs_17">2025-08-24 15:51:12</div>
                    <div class="w_160 border_1_s_ccc ph_20 fs_17">2025-08-24 17:19:56</div>
                    <div class="w_160 h_53 lh_53 text_center border_1_s_ccc ph_20 fs_17">正常</div>
                  </div>
                </div>
              </div>
            </div>

            <!-- right -->
            <div class="w_60_p h_full p_10 flex_row_around" ref="monitorBox">
              <!-- 主监控 -->
              <div class="w_60_p h_full">
                <div class="w_full h_60_p">
                  <video class="full border_radius_10" autoplay controls id="slcVideoElement1"></video>
                </div>
              </div>

              <!-- 监控列表 -->
              <div class="w_40_p h_full scroll_box overflow_y_auto flex_row_around flex_wrap pl_10">
                <div class="w_48_p h_100 main_border border_radius_10 mb_10 cursor" 
                  :class="[activeSLCMonitorIndex == 0 ? 'main_border main_color' : 'sub_border color_fff']"
                  @click="clickSLCRunMonitor(0)"
                >
                  <div class="w_full h_full-30">
                    <!-- <video class="full border_t_radius_10" autoplay controls id="slcVideoElement1"></video> -->
                    <img class="h_full fit_cover border_radius_10" src="../assets/images/sa-liao-che-monitors/1.png" alt="">
                  </div>
                  <div class="w_full h_30 lh_30 bgc_05050680 text_center border_b_radius_10 fs_16">撒料口1</div>
                </div>

                <div class="w_48_p h_100 main_border border_radius_10 mb_10 cursor" 
                  :class="[activeSLCMonitorIndex == 1 ? 'main_border main_color' : 'sub_border color_fff']"
                  @click="clickSLCRunMonitor(1)"
                >
                  <div class="w_full h_full-30">
                    <!-- <video class="full border_t_radius_10" autoplay controls id="slcVideoElement2"></video> -->
                    <img class="h_full fit_cover border_radius_10" src="../assets/images/sa-liao-che-monitors/2.png" alt="">
                  </div>
                  <div class="w_full h_30 lh_30 bgc_05050680 text_center border_b_radius_10 fs_16">撒料口2</div>
                </div>

                <div class="w_48_p h_100 main_border border_radius_10 mb_10 cursor" 
                  :class="[activeSLCMonitorIndex == 2 ? 'main_border main_color' : 'sub_border color_fff']"  
                  @click="clickSLCRunMonitor(2)"
                >
                  <div class="w_full h_full-30">
                    <!-- <video class="full border_t_radius_10" autoplay controls id="slcVideoElement3"></video> -->
                    <img class="h_full fit_cover border_radius_10" src="../assets/images/sa-liao-che-monitors/3.png" alt="">
                  </div>
                  <div class="w_full h_30 lh_30 bgc_05050680 text_center border_b_radius_10 fs_16">箱体内</div>
                </div>

                <div class="w_48_p h_100 main_border border_radius_10 mb_10 cursor" 
                  :class="[activeSLCMonitorIndex == 3 ? 'main_border main_color' : 'sub_border color_fff']"
                  @click="clickSLCRunMonitor(3)"
                >
                  <div class="w_full h_full-30">
                    <!-- <video class="full border_t_radius_10" autoplay controls id="slcVideoElement4"></video> -->
                    <img class="h_full fit_cover border_radius_10" src="../assets/images/sa-liao-che-monitors/4.png" alt="">
                  </div>
                  <div class="w_full h_30 lh_30 bgc_05050680 text_center border_b_radius_10 fs_16">背面</div>
                </div>

                <div class="w_48_p h_100 main_border border_radius_10 mb_10 cursor" 
                  :class="[activeSLCMonitorIndex == 4 ? 'main_border main_color' : 'sub_border color_fff']"
                  @click="clickSLCRunMonitor(4)"
                >
                  <div class="w_full h_full-30">
                    <!-- <video class="full border_t_radius_10" autoplay controls id="slcVideoElement5"></video> -->
                    <img class="h_full fit_cover border_radius_10" src="../assets/images/monitors/10.png" alt="">
                  </div>
                  <div class="w_full h_30 lh_30 bgc_05050680 text_center border_b_radius_10 fs_16">通道1监控</div>
                </div>

                <div class="w_48_p h_100 main_border border_radius_10 mb_10 cursor" 
                  :class="[activeSLCMonitorIndex == 5 ? 'main_border main_color' : 'sub_border color_fff']"  
                  @click="clickSLCRunMonitor(5)"
                >
                  <div class="w_full h_full-30">
                    <!-- <video class="full border_t_radius_10" autoplay controls id="slcVideoElement6"></video> -->
                    <img class="h_full fit_cover border_radius_10" src="../assets/images/monitors/2.png" alt="">
                  </div>
                  <div class="w_full h_30 lh_30 bgc_05050680 text_center border_b_radius_10 fs_16">通道2监控</div>
                </div>
              </div>
            </div>  
          </div>
        </div>
      </div>
    </div>

    <!-- 清粪信息 -->
    <div v-show="showQingFen" class="full absolute top_0 lrft_0 bgc_000000c2">
      <div class="w_70_p bgc_3D4454 absolute_center z_999999 p_40">
        <div class="w_30 h_30 absolute top_10 right_10 cursor" @click="hideFingFenDialog()">
          <img class="full" src="../assets/images/chart-box/cancel.png" alt="">
        </div>

        <div class="fw_bold color_fff fs_26 mb_30">自动清粪</div>
        <div class="w_full h_500 fs_24">
          <div class="full flex_row_start">
            <!-- left -->
            <div class="w_50_p h_full">
              <div class="w_full flex_row_start">
                <div class="w_200 h_200">
                  <div class="text_center color_fff">清粪设备</div>
                  <img class="w_full h_full-20" src="../assets/images/she-bei/qing-fen.png" alt="">
                </div>

                <div class="w_400 pl_20 color_fff">
                  <div class="" v-if="sheBeiList1[2].info && sheBeiList1[2].info.deriveMetadata && sheBeiList1[2].info.deriveMetadata.functions && sheBeiList1[2].info.deriveMetadata.functions.length">
                    <div class="flex_row_start flex_center gap_10" v-for="(item, index) in sheBeiList1[2].info.deriveMetadata.functions" :key="index">
                      <div class="w_160 color_fff">{{ item.name }}： </div>
                      <el-tooltip content="该操作会更新设备的运行状态！操作前需谨慎！" placement="top">
                        <el-switch
                          v-model="item.xxState"
                          active-color="#E8CEB8"
                          inactive-color="#181D2A"
                          @change="handleChangeQFJxxState($event, item, sheBeiList1[2].info.deviceId, sheBeiList1[2].info.productId, index)">
                        </el-switch>
                      </el-tooltip>
                      <span class="ml_10" :class="[item.xxState ? 'color_green' : 'color_eee']">{{ item.xxState ? '运行中' : '关闭中' }} </span>
                    </div>
                  </div>
                </div>
              </div>

              <div class="main_color fw_bold fs_23">· 设备传感器状态</div>
              <div class="flex_row_start pt_10 color_fff">
                <div class="w_300 border_1_s_ccc ph_20 fs_20">运行时间</div>
                <div class="w_160 border_1_s_ccc ph_20 fs_20">发送信息</div>
                <div class="w_160 border_1_s_ccc ph_20 fs_20">发送时长</div>
                <div class="w_140 border_1_s_ccc ph_20 fs_20">状态</div>
              </div>
              <div class="flex_row_start color_fff">
                <div class="w_300 border_1_s_ccc ph_20 fs_17">2025-08-26 18:18:35</div>
                <div class="w_160 border_1_s_ccc ph_20 fs_17 color_red">清粪结束</div>
                <div class="w_160 border_1_s_ccc ph_20 fs_17 color_red">15s</div>
                <div class="w_140 border_1_s_ccc ph_20 fs_17">正常</div>
              </div>
              <div class="flex_row_start color_fff">
                <div class="w_300 border_1_s_ccc ph_20 fs_17">2025-08-26 18:17:54</div>
                <div class="w_160 border_1_s_ccc ph_20 fs_17">清粪中</div>
                <div class="w_160 border_1_s_ccc ph_20 fs_17">25s</div>
                <div class="w_140 border_1_s_ccc ph_20 fs_17">正常</div>
              </div>
              <div class="flex_row_start color_fff">
                <div class="w_300 border_1_s_ccc ph_20 fs_17">2025-08-26 18:16:26</div>
                <div class="w_160 border_1_s_ccc ph_20 fs_17">清粪中</div>
                <div class="w_160 border_1_s_ccc ph_20 fs_17">19s</div>
                <div class="w_140 border_1_s_ccc ph_20 fs_17">正常</div>
              </div>
              <div class="flex_row_start color_fff">
                <div class="w_300 border_1_s_ccc ph_20 fs_17">2025-08-26 18:15:25</div>
                <div class="w_160 border_1_s_ccc ph_20 fs_17">清粪中</div>
                <div class="w_160 border_1_s_ccc ph_20 fs_17">19s</div>
                <div class="w_140 border_1_s_ccc ph_20 fs_17">正常</div>
              </div>
              <div class="flex_row_start color_fff">
                <div class="w_300 border_1_s_ccc ph_20 fs_17">2025-08-26 18:14:24</div>
                <div class="w_160 border_1_s_ccc ph_20 fs_17">清粪中</div>
                <div class="w_160 border_1_s_ccc ph_20 fs_17">19s</div>
                <div class="w_140 border_1_s_ccc ph_20 fs_17">正常</div>
              </div>
              <div class="flex_row_start color_fff">
                <div class="w_300 border_1_s_ccc ph_20 fs_17">2025-08-26 18:13:34</div>
                <div class="w_160 border_1_s_ccc ph_20 fs_17 color_0bfb83">清粪开始</div>
                <div class="w_160 border_1_s_ccc ph_20 fs_17 color_0bfb83">17s</div>
                <div class="w_140 border_1_s_ccc ph_20 fs_17">正常</div>
              </div>
            </div>

            <!-- right -->
            <div class="w_50_p h_full p_10 flex_row_start" ref="monitorBox">
              <!-- 主监控 -->
              <div class="w_60_p h_full">
                <div class="w_full h_60_p">
                  <video class="full border_radius_10" autoplay controls id="qfVideoElement1"></video>
                </div>
              </div>

               <!-- 监控列表 -->
              <div class="w_40_p h_full scroll_box overflow_y_auto pl_10">
                <div class="w_full h_140 main_border border_radius_10 mb_10"

                  :class="[activeQFJMonitorIndex == 0 ? 'main_border main_color' : 'sub_border color_fff']"
                  @click="clickQFJRunMonitor(0)"
                >
                  <div class="w_full h_full-30">
                    <!-- <video class="full border_t_radius_10" autoplay controls id="qfVideoElement1"></video> -->
                    <img class="h_full fit_cover border_radius_10" src="../assets/images/qing-fen-che-monitors/1.png" alt="">
                  </div>
                  <div class="w_full h_30 lh_30 bgc_05050680 text_center border_b_radius_10 fs_16">清粪监控1</div>
                </div>

                <div class="w_full h_140 main_border border_radius_10"
                  :class="[activeQFJMonitorIndex == 1 ? 'main_border main_color' : 'sub_border color_fff']"
                  @click="clickQFJRunMonitor(1)"
                >
                  <div class="w_full h_full-30">
                    <!-- <video class="full border_t_radius_10" autoplay controls id="qfVideoElement2"></video> -->
                    <img class="h_full fit_cover border_radius_10" src="../assets/images/qing-fen-che-monitors/2.png" alt="">
                  </div>
                  <div class="w_full h_30 lh_30 bgc_05050680 text_center border_b_radius_10 fs_16">清粪监控2</div>
                </div>
              </div>

            </div>  
          </div>
        </div>
      </div>
      
    </div>

    <!-- 场景联动 -->
    <div v-show="showChangJing" class="full absolute top_0 lrft_0 bgc_000000c2">
      <div class="w_70_p bgc_3D4454 absolute_center z_999999 p_40">
        <div class="w_30 h_30 absolute top_10 right_10 cursor" @click="hideChangJingDialog()">
          <img class="full" src="../assets/images/chart-box/cancel.png" alt="">
        </div>

        <div class="fw_bold color_fff fs_26 mb_30">场景联动</div>
        <div class="w_full h_500 fs_24">

          <div class="full flex_row_start gap_10">
            <div class="w_50_p h_full overflow_y_auto scroll_box">
              <div 
                class="w_full cursor main_border border_radius_10 p_10 flex_row_start gap_10" 
                v-for="(item, index) in sceneList" :key="index"
                @click="clickCJLDSheBei(item)"
              >
                <div class="w_120 h_120">
                  <img class="full" :src="item.photoUrl" alt="">
                </div>

                <div class="flex_grow_1 color_fff">
                  <div class="w_full h_30 lh_30 flex_row_between mt_10">
                    <div class="main_color">{{ item.name }}</div>
                    <div class="">
                      手动控制 : 
                      <span class="color_green" v-if="item.trigger.type == 'manual'">已启用 🟢</span>
                      <span class="color_green" v-else>已禁用 🔴</span>
                    </div>
                  </div>

                  <div class="h_80 lh_80" v-if="item.branches['0'].then['0'].actions && item.branches['0'].then['0'].actions.length">

                    <span v-for="(item2, index2) in item.branches['0'].then['0'].actions" :key="index2">
                      {{ item2.options.propertiesName }}
                      <span v-if="index2 < item.branches['0'].then['0'].actions.length - 1"> -> </span>
                    </span>
                    
                  </div>
                </div>
              </div>
            </div>

            <div class="w_50_p h_480 main_border border_radius_10 color_fff p_10">
              <!-- {{ activeCJLDSheBei }} -->

              <div class="w_full gap_10" v-if="activeCJLDSheBei && activeCJLDSheBei.photoUrl">
                <div class="w_full flex_row_start flex_center gap_10">
                  <div class="w_120 h_120">
                    <img class="full" :src="activeCJLDSheBei.photoUrl" alt="">
                  </div>

                  <div class="flex_grow_1 color_fff">
                    <div class="w_full flex_row_between mt_10">
                      <div class="main_color">{{ activeCJLDSheBei.name }}</div>

                      <div>
                        <el-button type="primary" plain>▶ 启动任务</el-button>
                        <el-button type="danger">⏹ 终止任务</el-button>
                      </div>
                    </div>
                  </div>
                </div>

                <div class="w_full h_full-130 mt_10">
                  <div class="w_full flex_row_start flex_center pl_10">
                    <div class="w_30 h_30 title_icon"></div> 
                    <div class="w_80 main_color cursor fs_26 ml_20">串行</div>
                    <div class="flex_grow_1 main_border h_0_5"></div>
                  </div>

                  <div 
                    class="w_full h_full-200 overflow_y_auto scroll_box p_10" 
                    v-if="activeCJLDSheBei.branches['0'].then['0'].actions && activeCJLDSheBei.branches['0'].then['0'].actions.length"
                  >
                    <div class="w_full h_50 lh_50 sub_bgc border_radius_10 mb_10 ph_10 flex_row_between flex_center"  
                      v-for="(item4, index4) in activeCJLDSheBei.branches['0'].then['0'].actions" :key="index4"
                    >
                      <div>{{ index4 + 1 }}. ⚙ {{ item4.options.propertiesName }}</div> 
                      <div v-if="item4">⏸ 等待中</div>
                    </div>
                  </div>
                </div>
                
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 传送带 -->
    <el-dialog
      title="传送带信息"
      :visible.sync="showChuanSongDai"
      width="50%"
    >
      <div class="w_full h_500 fs_24 scroll_box overflow_y_auto">
        <div class="w_full flex_row_start flex_center">
          <div class="w_200 h_200">
            <img class="w_full fit_cover" src="../assets/images/icon/chuan-song-dai.png" alt="">
          </div>

          <div class="w_400 pl_20 color_fff">
            <div class="" v-if="sheBeiList2[2].info && sheBeiList2[2].info.deriveMetadata && sheBeiList2[2].info.deriveMetadata.functions && sheBeiList2[2].info.deriveMetadata.functions.length">
              <div v-for="(item, index) in sheBeiList2[2].info.deriveMetadata.functions" :key="index">
                <span class="color_fff">{{ item.name }}： </span>
                <el-tooltip content="该操作会更新设备的运行状态！操作前需谨慎！" placement="top">
                  <el-switch
                    v-model="item.xxState"
                    active-color="#E8CEB8"
                    inactive-color="#181D2A"
                    @change="handleChangeCSDxxState($event, item, sheBeiList2[2].info.deviceId, sheBeiList2[2].info.productId)">
                  </el-switch>
                </el-tooltip>
                <span class="ml_10" :class="[item.xxState ? 'color_green' : 'color_red']">{{ item.xxState ? '运行中' : '关闭中' }} </span>
              </div>
            </div>
          </div>
        </div>

        <div class="w_full pl_20 color_fff">
          <div class="flex_row_start pt_10">
            <div class="w_300 border_1_s_ccc ph_20 fs_20">运行时间</div>
            <div class="w_300 border_1_s_ccc ph_20 fs_20">结束时间</div>
            <div class="w_300 border_1_s_ccc ph_20 fs_20">运行状态</div>
          </div>
          <div class="flex_row_start">
            <div class="w_300 border_1_s_ccc ph_20 fs_17">2025-08-01 10:45:45</div>
            <div class="w_300 border_1_s_ccc ph_20 fs_17">2025-08-01 11:09:16</div>
            <div class="w_300 border_1_s_ccc ph_20 fs_17">正常</div>
          </div>
          <div class="flex_row_start">
            <div class="w_300 border_1_s_ccc ph_20 fs_17">2025-07-31 17:31:12</div>
            <div class="w_300 border_1_s_ccc ph_20 fs_17">2025-07-31 17:56:15</div>
            <div class="w_300 border_1_s_ccc ph_20 fs_17">正常</div>
          </div>
          <div class="flex_row_start">
            <div class="w_300 border_1_s_ccc ph_20 fs_17">2025-07-31 10:09:35</div>
            <div class="w_300 border_1_s_ccc ph_20 fs_17">2025-07-31 10:27:09</div>
            <div class="w_300 border_1_s_ccc ph_20 fs_17">正常</div>
          </div>
          <div class="flex_row_start">
            <div class="w_300 border_1_s_ccc ph_20 fs_17">2025-07-30 16:34:12</div>
            <div class="w_300 border_1_s_ccc ph_20 fs_17">2025-07-30 17:08:12</div>
            <div class="w_300 border_1_s_ccc ph_20 fs_17">正常</div>
          </div>
        </div>
      </div>
    </el-dialog>

    <!-- 储料罐 -->
    <el-dialog
      title="储料罐信息"
      :visible.sync="showChuLiaoGuan"
      width="50%"
    >
      <div class="w_full h_500 fs_24 scroll_box overflow_y_auto">
        <div class="w_full flex_row_around flex_center">
          <div class="w_200 h_200">
            <div class="color_fff">1 号储料罐</div>
            <div class="color_green">剩余 135.34 KG</div>
            <img class="w_full fit_cover" src="../assets/images/she-bei/chu-liao-guan.png" alt="">
          </div>
          <div class="w_200 h_200">
            <div class="color_fff">1 号储料罐</div>
            <div class="color_green">剩余 89.62 KG</div>
            <img class="w_full fit_cover" src="../assets/images/she-bei/chu-liao-guan.png" alt="">
          </div>
          <div class="w_200 h_200">
            <div class="color_fff">1 号储料罐</div>
            <div class="color_green">剩余 78.98 KG</div>
            <img class="w_full fit_cover" src="../assets/images/she-bei/chu-liao-guan.png" alt="">
          </div>

        </div>
      </div>
    </el-dialog>

    <!-- 恒温饮水 -->
    <el-dialog
      title="恒温饮水"
      :visible.sync="showYinShui"
      width="65%"
      @close="cloneHWYSDialog"
    >
      <div class="w_full h_500 flex_row_start">
        <div class="w_40_p h_full relative">
          <img class="w_full fit_cover" src="../assets/images/def/heng-wen-yin-shui.png" alt="">

          <div class="w_100 h_30 absolute top_14 left_32_p fw_bold color_000" v-if="hwysState.collectorte">{{ hwysState.collectorte }} ℃</div>
          <div class="w_100 h_30 absolute top_65_p left_2_p fw_bold color_000" v-if="hwysState.pcoldup">{{ hwysState.pcoldup }} ℃</div>
          <div class="w_100 h_30 absolute bottom_15_p left_42_p fw_bold color_fff" v-if="hwysState.stem">{{ hwysState.stem }} ℃</div>
          <div class="w_100 h_30 absolute bottom_1_p left_40_p fw_bold color_000" v-if="hwysState.waterlevel">水位{{ hwysState.waterlevel }} 级</div>
          <div class="w_100 h_30 absolute bottom_10_p right_3_p fw_bold color_000" v-if="hwysState.usete">{{ hwysState.usete }} ℃</div>
        </div>
        <div class="w_60_p color_fff pl_20">
          <el-tabs v-model="activeSheBeiType">
            <el-tab-pane label="设备数据" name="first">
              <div class="full flex_row_start gap_10 flex_wrap align_content_start pl_20 fs_18">
                <div class="w_32_p h_40 lh_40 main_border mb_10 pl_15 border_radius_5">设备状态：<span :class="[hwysState.devicestatus == 1 ? 'color_green' : 'color_red']">{{ hwysState.devicestatus == 1 ? '在线' : '离线' }}</span></div>
                <div class="w_32_p h_40 lh_40 main_border mb_10 pl_15 border_radius_5">补水： <span :class="[hwysState.addwater == 1 ? 'color_green' : 'color_red']">{{ hwysState.addwater == 1 ? '打开中' : '关闭中' }}</span></div>
                <div class="w_32_p h_40 lh_40 main_border mb_10 pl_15 border_radius_5">防冻： <span :class="[hwysState.nocold == 1 ? 'color_green' : 'color_red']">{{ hwysState.nocold == 1 ? '打开中' : '关闭中' }}</span></div>
                <div class="w_32_p h_40 lh_40 main_border mb_10 pl_15 border_radius_5">集热循环： <span :class="[hwysState.hotforeach == 1 ? 'color_green' : 'color_red']">{{ hwysState.hotforeach == 1 ? '打开中' : '关闭中' }}</span></div>
                <div class="w_32_p h_40 lh_40 main_border mb_10 pl_15 border_radius_5">排空： <span :class="[hwysState.setnull == 1 ? 'color_green' : 'color_red']">{{ hwysState.setnull == 1 ? '打开中' : '关闭中' }}</span></div>
                <div class="w_32_p h_40 lh_40 main_border mb_10 pl_15 border_radius_5">加热： <span :class="[hwysState.addhot == 1 ? 'color_green' : 'color_red']">{{ hwysState.addhot == 1 ? '打开中' : '关闭中' }}</span></div>
                <div class="w_32_p h_40 lh_40 main_border mb_10 pl_15 border_radius_5">辅助热源： <span :class="[hwysState.hotstart  == 1 ? 'color_green' : 'color_red']">{{ hwysState.hotstart  == 1 ? '打开中' : '关闭中' }}</span></div>
                <div class="w_32_p h_40 lh_40 main_border mb_10 pl_15 border_radius_5">用水循环/采暖： <span :class="[hwysState.waterforeach  == 1 ? 'color_green' : 'color_red']">{{ hwysState.waterforeach  == 1 ? '打开中' : '关闭中' }}</span></div>
                <div class="w_32_p h_40 lh_40 main_border mb_10 pl_15 border_radius_5">空气能： <span :class="[hwysState.nullsave  == 1 ? 'color_green' : 'color_red']">{{ hwysState.nullsave  == 1 ? '打开中' : '关闭中' }}</span></div>
                <div class="w_32_p h_40 lh_40 main_border mb_10 pl_15 border_radius_5">水箱温度：{{ hwysState.stem }} ℃</div>
                <div class="w_32_p h_40 lh_40 main_border mb_10 pl_15 border_radius_5">防冻温度：{{ hwysState.pcoldup }} ℃</div>
                <div class="w_32_p h_40 lh_40 main_border mb_10 pl_15 border_radius_5">水箱水位：{{ hwysState.waterlevel }}</div>
                <div class="w_32_p h_40 lh_40 main_border mb_10 pl_15 border_radius_5">恒温水箱水位：{{ hwysState.constantwater }}</div>
                <div class="w_32_p h_40 lh_40 main_border mb_10 pl_15 border_radius_5">集热器温度：{{ hwysState.collectorte }} ℃</div>
                <div class="w_32_p h_40 lh_40 main_border mb_10 pl_15 border_radius_5">恒温水箱温度：{{ hwysState.constantt }} ℃</div>
                <div class="w_32_p h_40 lh_40 main_border mb_10 pl_15 border_radius_5">房间温度：{{ hwysState.usete }} ℃</div>
              </div>
            </el-tab-pane>
            <!-- <el-tab-pane label="配置项" name="second">配置项</el-tab-pane> -->
          </el-tabs>
        </div>
      </div>
    </el-dialog>

    <!-- 机器狗 -->
    <el-dialog
      title="机器狗信息"
      :visible.sync="showJiQiGou"
      width="65%"
      @close=""
    >
      <div class="w_full h_500 flex_row_start">
        <div class="w_60_p h_full">
          <YunShuMap />
        </div>
        <div class="w_40_p color_fff pl_20">
          <div class="h_200 mb_20">
            <img class="h_full fit_contain" src="../assets/images/she-bei/ji-qi-gou.png" alt="">
          </div>
          
          <div class="w_full h_full-200 flex_row_start gap_10 flex_wrap">
            <div class="w_45_p h_40 lh_40 main_border mb_10 pl_15 border_radius_5">
              <span class="color_fff">当前电量:</span> <span class="color_green">67%</span>
            </div>
            <div class="w_45_p h_40 lh_40 main_border mb_10 pl_15 border_radius_5">
              <span class="color_fff">移动速度:</span> <span class="color_green">45 m/s</span>
            </div>
            <div class="w_45_p h_40 lh_40 main_border mb_10 pl_15 border_radius_5">
              <span class="color_fff">巡逻状态:</span> <span class="color_green">开启中</span>
            </div>
            <div class="w_45_p h_40 lh_40 main_border mb_10 pl_15 border_radius_5">
              <span class="color_fff">执行任务状态:</span> <span class="color_green">执行中</span>
            </div>
            <div class="w_45_p h_40 lh_40 main_border mb_10 pl_15 border_radius_5">
              <span class="color_fff">指令学习:</span> <span class="color_green">学习中</span>
            </div>
            <div class="w_45_p h_40 lh_40 main_border mb_10 pl_15 border_radius_5">
              <span class="color_fff">等待指令:</span> <span class="color_green">执行中</span>
            </div>
          </div>
        </div>
      </div>
    </el-dialog>

    <!-- 无人机 -->
    <el-dialog
      title="无人机信息"
      :visible.sync="showWuRenJi"
      width="65%"
      @close=""
    >
      <div class="w_full h_500 flex_row_start">
        <div class="w_60_p h_full">
          <YunShuMap />
        </div>
        <div class="w_40_p color_fff pl_20">
          <div class="h_200 mb_20">
            <img class="h_full fit_contain" src="../assets/images/she-bei/wu-ren-ji.png" alt="">
          </div>
          
          <div class="w_full h_full-200 flex_row_start gap_10 flex_wrap">
            <div class="w_45_p h_40 lh_40 main_border mb_10 pl_15 border_radius_5">
              <span class="color_fff">当前电量:</span> <span class="color_green">67%</span>
            </div>
            <div class="w_45_p h_40 lh_40 main_border mb_10 pl_15 border_radius_5">
              <span class="color_fff">移动速度:</span> <span class="color_green">45 m/s</span>
            </div>
            <div class="w_45_p h_40 lh_40 main_border mb_10 pl_15 border_radius_5">
              <span class="color_fff">巡逻状态:</span> <span class="color_green">开启中</span>
            </div>
            <div class="w_45_p h_40 lh_40 main_border mb_10 pl_15 border_radius_5">
              <span class="color_fff">执行任务状态:</span> <span class="color_green">执行中</span>
            </div>
            <div class="w_45_p h_40 lh_40 main_border mb_10 pl_15 border_radius_5">
              <span class="color_fff">指令学习:</span> <span class="color_green">学习中</span>
            </div>
            <div class="w_45_p h_40 lh_40 main_border mb_10 pl_15 border_radius_5">
              <span class="color_fff">等待指令:</span> <span class="color_green">执行中</span>
            </div>
          </div>
        </div>
      </div>
    </el-dialog>

    <!-- 羊体称 过称信息 -->
    <el-dialog
      title="过称信息"
      :visible.sync="showYangCheng"
      width="70%"
      @closed="closeYangCheng"
    >
      <div class="w_full h_500 fs_24 scroll_box overflow_y_auto">
        <el-table :data="cattleList" border style="width: 100%">
          <el-table-column prop="earNum" label="耳标号" />
          <el-table-column prop="measureTime" label="测量时间" width="180" />
          <el-table-column prop="bodyHeight" label="体高(cm)" />
          <el-table-column prop="bodyLength" label="体斜长(cm)" />
          <el-table-column prop="weight" label="体重(kg)" />
          <el-table-column prop="cannonBone" label="管围(cm)" />
          <el-table-column prop="chestDepth" label="胸深(cm)" />
          <el-table-column prop="chestSize" label="胸围(cm)" />
          <el-table-column prop="hipCross" label="十字部高(cm)" />
        </el-table>
      </div>
    </el-dialog>

    <!-- 养殖档案 -->
    <el-dialog
      title="养殖档案"
      :visible.sync="showDangAn"
      width="70%"
      @closed="closeIframe"
    >
      <div class="w_full h_600" v-if="showIframne">
        <iframe class="full" id="pxiframe" :name="iframeName" :src="iframeSrc" frameborder="0"></iframe>
      </div>
    </el-dialog>
  </div>
</template>



<script>
  import BingTu from './charts/bing-tu.vue'
  import LineChart from './charts/line-chart.vue'
  import KongXinBingTu from './charts/kong-xin-bing-tu.vue'
  import ZhuZhuangTu from './charts/zhu-zhuang-tu.vue'
  import ShuangZhuTu from './charts/shuang-zhu-tu.vue'

  import PlayVideo from './play-video.vue'

  import BaiDuMap from '@/common/baiDuMap/index.vue'
  import YunShuMap from '@/common/baiDuMap/yunShuMap.vue'

  import screenfull from 'screenfull'

  import flvjs from 'flv.js'
  

  import { 
    getToken, 
    getDeviceList, 
    getDeviceInfo, 
    getDeviceHistoryData,

    getMuu2ZLToken,
    getAllDeviceInstanceListAndStatus,
    invokedFunction,
    getSceneList,

    getScaleList,

    getHWYSDeviceStatus,

  } from '@/config/api.js'

  import { Message } from 'element-ui';

  import ws from '@/util/websocket.js'



  export default {
    name: 'Home',
    components: { 
      BingTu, 
      LineChart, 
      KongXinBingTu, 
      ZhuZhuangTu, 
      ShuangZhuTu,

      PlayVideo,

      BaiDuMap,
      YunShuMap,
    },
    data() {
      return {
        isFullscreen: false,
        timer: null,

        // ------------- 山东仁科 --------------
        current_time: null,

        token: '',
        deviceList: [],
        registerList: [],

        activeDevice: {},

        deviceHistoryChart: {},

        date: [],
        startTime: '',
        endTime: '',
        activeTimeType: '2',

        altzb: require('@/assets/images/def/altzb.jpg'),

        userPoint: [ {lng: 119.778448, lat: 49.146704} ],

        data1: {},
        data2: {},
        data3: {},

        si_liao: {
          jing_si_liao: 800,
          gan_cao: 5,
          qing_chu: 10
        },

        sheBeiList1: [
          { name: '撒料车',     state: false, info: {}, metadata: {}, img: require('../assets/images/she-bei/sa-liao-che.png') },
          { name: '场景联动',   state: true,  info: {}, metadata: {}, img: require('../assets/images/icon/lian-dong.png') },
          { name: '清粪机器人', state: false, info: {}, metadata: {}, img: require('../assets/images/she-bei/qing-fen.png') },
          { name: '配料系统',   state: false, info: {}, metadata: {}, img: require('../assets/images/she-bei/chu-liao-guan.png') }
        ],
        sheBeiList2: [
          { name: '无人机', state: false, info: {}, metadata: {}, img: require('../assets/images/she-bei/wu-ren-ji.png') },
          { name: '机器狗', state: false, info: {}, metadata: {}, img: require('../assets/images/she-bei/ji-qi-gou.png') },
          { name: '恒温饮水',   state: true,  info: {}, metadata: {}, img: require('../assets/images/she-bei/heng-wen-yin-shui.png') },
          // { name: '传送带',     state: false, info: {}, metadata: {}, img: require('../assets/images/icon/chuan-song-dai.png') },
          { name: '羊体称', state: false, info: {}, metadata: {}, img: require('../assets/images/she-bei/cheng.png') },
          // { name: 'TMR',    state: false, info: {}, metadata: {}, img: require('../assets/images/icon/jiao-ban-ji.png') },
        ],

        saLiaoCheMonitors: [
          'https://camera.muu2.com:16604/3/3?AVType=1&DevIDNO=118270657835&Stream=1&jsession=402572B0015A0F2788AEE1A5319A6D58&Channel=0',
          'https://camera.muu2.com:16604/3/3?AVType=1&DevIDNO=118270657835&Stream=1&jsession=402572B0015A0F2788AEE1A5319A6D58&Channel=1',
          'https://camera.muu2.com:16604/3/3?AVType=1&DevIDNO=118270657835&Stream=1&jsession=402572B0015A0F2788AEE1A5319A6D58&Channel=2',
          'https://camera.muu2.com:16604/3/3?AVType=1&DevIDNO=118270657835&Stream=1&jsession=402572B0015A0F2788AEE1A5319A6D58&Channel=3',
          'http://8.130.104.179:8092/rtp/34020000001110000001_34020000001310000002.live.flv',
          'http://8.130.104.179:8092/rtp/34020000001110000001_34020000001310000010.live.flv'
        ],
        saLiaoCheMonitor1: null,
        saLiaoCheMonitor2: null,
        saLiaoCheMonitor3: null,
        saLiaoCheMonitor4: null,
        saLiaoCheMonitor5: null,
        saLiaoCheMonitor6: null,

        activeSLCMonitorIndex: 5,

        qingFenJiMonitors: [
          'https://camera.muu2.com:16604/3/3?AVType=1&DevIDNO=118270657846&Stream=1&jsession=402572B0015A0F2788AEE1A5319A6D58&Channel=0',
          'https://camera.muu2.com:16604/3/3?AVType=1&DevIDNO=118270657846&Stream=1&jsession=402572B0015A0F2788AEE1A5319A6D58&Channel=1',
        ],
        qingFenJiMonitor1: null,
        qingFenJiMonitor2: null,

        activeQFJMonitorIndex: 0,

        hwysState: {
          devicestatus: "",  //设备状态 1在线 2离线
          addwater: "",      //补水 1开 0关 
          nocold: "",        //防冻 1开 0关
          hotforeach: "",    //集热循环 1开 0关
          setnull: "",       //排空 1开 0关
          addhot: "",        //加热 1开 0关
          hotstart: "",      //辅助热源 1开 0关
          waterforeach: "",  //用水循环/采暖 1开 0关
          nullsave: "",      //空气能 1开 0关
          stem: "",         //水箱温度
          pcoldup: "",      //防冻温度
          waterlevel: "",    //水箱水位
          constantwater: "", //恒温水箱水位
          collectorte: "",  //集热器温度
          constantt: "",     //恒温水箱温度
          usete: ""         //房间温度
        },

        yangChengList: [
          { 
            Weight: '0.0' ,
            bodyHeight: '90.1',
            bodyLength: '48.0',
            cannonBone: '32.1',
            chestlepth: '69.0',
            chestSize: '216.8',
            earNum: '604BAD69A5',
            hipCross: '106.1',
            time: '2025-07-30 16:36:05'
          },
          { 
            Weight: '0.0' ,
            bodyHeight: '90.1',
            bodyLength: '48.0',
            cannonBone: '32.1',
            chestlepth: '69.0',
            chestSize: '216.8',
            earNum: '604BAD69A4',
            hipCross: '106.1',
            time: '2025-07-30 16:36:05'
          },
          { 
            Weight: '0.0' ,
            bodyHeight: '90.1',
            bodyLength: '48.0',
            cannonBone: '32.1',
            chestlepth: '69.0',
            chestSize: '216.8',
            earNum: '604BAD69A3',
            hipCross: '106.1',
            time: '2025-07-30 16:36:05'
          },
          { 
            Weight: '0.0' ,
            bodyHeight: '90.1',
            bodyLength: '48.0',
            cannonBone: '32.1',
            chestlepth: '69.0',
            chestSize: '216.8',
            earNum: '604BAD69A2',
            hipCross: '106.1',
            time: '2025-07-30 16:36:05'
          },
          { 
            Weight: '0.0' ,
            bodyHeight: '90.1',
            bodyLength: '48.0',
            cannonBone: '32.1',
            chestlepth: '69.0',
            chestSize: '216.8',
            earNum: '604BAD69A5',
            hipCross: '106.1',
            time: '2025-07-30 16:36:05'
          },
          { 
            Weight: '0.0' ,
            bodyHeight: '90.1',
            bodyLength: '48.0',
            cannonBone: '32.1',
            chestlepth: '69.0',
            chestSize: '216.8',
            earNum: '604BAD69A4',
            hipCross: '106.1',
            time: '2025-07-30 16:36:05'
          },
          { 
            Weight: '0.0' ,
            bodyHeight: '90.1',
            bodyLength: '48.0',
            cannonBone: '32.1',
            chestlepth: '69.0',
            chestSize: '216.8',
            earNum: '604BAD69A3',
            hipCross: '106.1',
            time: '2025-07-30 16:36:05'
          },
          { 
            Weight: '0.0' ,
            bodyHeight: '90.1',
            bodyLength: '48.0',
            cannonBone: '32.1',
            chestlepth: '69.0',
            chestSize: '216.8',
            earNum: '604BAD69A2',
            hipCross: '106.1',
            time: '2025-07-30 16:36:05'
          },
          { 
            Weight: '0.0' ,
            bodyHeight: '90.1',
            bodyLength: '48.0',
            cannonBone: '32.1',
            chestlepth: '69.0',
            chestSize: '216.8',
            earNum: '604BAD69A5',
            hipCross: '106.1',
            time: '2025-07-30 16:36:05'
          },
          { 
            Weight: '0.0' ,
            bodyHeight: '90.1',
            bodyLength: '48.0',
            cannonBone: '32.1',
            chestlepth: '69.0',
            chestSize: '216.8',
            earNum: '604BAD69A4',
            hipCross: '106.1',
            time: '2025-07-30 16:36:05'
          },
          { 
            Weight: '0.0' ,
            bodyHeight: '90.1',
            bodyLength: '48.0',
            cannonBone: '32.1',
            chestlepth: '69.0',
            chestSize: '216.8',
            earNum: '604BAD69A3',
            hipCross: '106.1',
            time: '2025-07-30 16:36:05'
          },
          { 
            Weight: '0.0' ,
            bodyHeight: '90.1',
            bodyLength: '48.0',
            cannonBone: '32.1',
            chestlepth: '69.0',
            chestSize: '216.8',
            earNum: '604BAD69A2',
            hipCross: '106.1',
            time: '2025-07-30 16:36:05'
          }
        ],
        activeSheBeiType: 'first',




        // ------------- muu2 智联 --------------
        muu2ZLToken: null,
        sceneList: null,
        activeCJLDSheBei: {},

        // ----------- 基础变量 -----------
        chart_1_category_type: 1,
        chart_1_time: 'month',

        sentBtn: '',

        lineData: {},
        lineData2: {},
        lineData3: {},
        lineData4: {},

        cattleList: [],

        active_cattle_index: null,
        active_records_index: null,

        cattleGrowData: {},

        showBaiDuMap: false,

        showPengJuan: false,
        showSiLiao: false,
        showXiaoHao: false,
        showChangJing: false,
        showSiWei: false,
        showSaLiaoChe: false,
        showChuanSongDai: false,
        showChuLiaoGuan: false,
        showYinShui: false,
        showJiQiGou: false,
        showWuRenJi: false,
        showQingFen: false,
        showDangAn: false,
        showYangCheng: false,

        showIframne: false,
        iframeName: '',
        iframeSrc: '',

        icon_right: require('../assets/images/icon/right.png'),
      }
    },
    async mounted() {
      // 销毁 撒料车 清粪机 监控
      this.distroyMonitor()

      this.current_time = setInterval(() => {
        this.current_time = this.curentTime(0, 0) 
      }, 1000) 
      this.startTime = this.curentTime(3, 0)
      this.endTime = this.curentTime(0, 0)

      this.date = [this.curentTime(3, 0), this.curentTime(0, 0)]

      // 获取 羊 体尺 记录 
      let params = { "keyWord": "J00000000003002502250x" }
      await this.getScaleList()

      // 获取 token
      await this.getToken()

      // 获取 牧途 iot token  -> 设备状态
      await this.getMuu2ZLToken()

      // 获取 恒温饮水 状态
      await this.getHWYSDeviceStatus()

      setTimeout(() => {
        this.initChart()
      }, 100)
    },
    methods: {
      // 全屏
      fullScreen() {
        let element = this.$refs.monitorBox
        // 先使用screenfull.enabled方法判断是否支持screenfull

        // 如果不允许进入全屏，发出不允许提示 浏览器不能全屏
       if (!screenfull.isEnabled) {
          this.$message({
            message:'浏览器不能全屏，安装其他版本试试',
            type:'warning'
          })

          return false
        }
        
        this.isFullscreen = !this.isFullscreen
        
        screenfull.request(element)

        // 调用 screenfull.toggle() 可以双向切换全屏与非全屏
        screenfull.toggle()
      },

      // 获取 token
      async getToken() {
        let res = await getToken()  
        try {
          if (res.code == 1000) {
            this.token = res.data.token

            // 获取设备列表
            await this.getDeviceList(res.data.token)
          } 
        } catch (err) {
          console.log('获取token失败 : ', err);
        }
      },

      // 获取 设备列表
      async getDeviceList(token) {
        let res = await getDeviceList(token)  
        try {
          if (res.code == 1000) {
            this.deviceList = res.data

            // 获取 设备信息
            await this.getDeviceInfo(token, res.data[0].deviceAddr)
          } 
        } catch (err) {
          console.log('获取 设备列表 失败 : ', err);
        }
      },

      // 获取 设备信息
      async getDeviceInfo(token, deviceAddrs) {
        let res = await getDeviceInfo(token, deviceAddrs)  
        try {
          if (res.code == 1000) {
            let registerList = []
            let infoList = []
            let dataItem = res.data[0].dataItem

            // console.log('dataItem : ', dataItem);

            for (let item of dataItem) {
              for (let x of item.registerItem) {
                x["nodeId"] = item.nodeId
              }
              registerList.push(item.registerItem)
            }

            // console.log('registerList : ', registerList);

            for (let item of registerList) {
              for (let i of item) {
                infoList.push({  
                  registerName: i.registerName,
                  data: i.data,
                  unit: i.unit,
                  deviceAddr: deviceAddrs,
                  nodeId: i.nodeId
                })
              }
            }

            // console.log('infoList : ', infoList);

            this.registerList = infoList
          } 
        } catch (err) {
          console.log('获取 设备信息 失败 : ', err);
        }
      },

      // 获取 设备历史数据
      async getDeviceHistoryData(token, params) {
        let res = await getDeviceHistoryData(token, params)  
        try {
          if (res.code == 1000) {
            let dataList = res.data
            // this.deviceHistoryData = res.data

            let unit = ''
            let x = []
            let y = []

            if (this.activeDevice.name == '温度') {
              unit = '℃'
            } else if (this.activeDevice.name == '湿度') {
              unit = '%'
            } else if (this.activeDevice.name == '氨气 (NH3)') {
              unit = 'ppm'
            } else if (this.activeDevice.name == '二氧化碳 (CO2)') {
              unit = 'ppm'
            } else if (this.activeDevice.name == '二氧化硫 (H2S)') {
              unit = 'ppm'
            } else if (this.activeDevice.name == '甲烷 (CH4)') {
              unit = 'ppm'
            } else if (this.activeDevice.name == '风速') {
              unit = 'm/s'
            } else {
              unit = ''
            }

            for (let item1 of dataList) {
              for (let item2 of item1.data)
              if (item2.registerName == this.activeDevice.name) {
                x.push(item1.recordTimeStr.substring(5, item1.recordTimeStr.length))
                y.push(item2.value)
              }
            }

            this.deviceHistoryChart = {
              unit: unit,
              x: x,
              y: y  
            }
              
          } 
        } catch (err) {
          console.log('获取 设备历史数据 失败 : ', err);
        }
      },

      // 点击 检测的设备名称
      clickDevice(device) {
        // console.log('点击 检测的设备名称 : ', device);
        this.deviceHistoryChart.unit = ''
        this.deviceHistoryChart.x = ''
        this.deviceHistoryChart.y = ''

        this.activeDevice = {
          name: device.registerName,
          deviceAddr: device.deviceAddr,
          nodeId: device.nodeId,
        } 
        
        let params = {
          deviceAddr: device.deviceAddr,
          nodeId: device.nodeId,
          startTime: this.startTime,
          endTime: this.endTime
        }
        this.getDeviceHistoryData(this.token, params)

        this.showPengJuan = true
      },

      // 获取时间
      curentTime(hour, day) {
        var now = new Date();

        // 将小时数减去1（会自动处理跨天情况，例如0点的前1小时会变为前一天的23点）
        now.setHours(now.getHours() - hour);  

        // 将日期减去7天
        now.setDate(now.getDate() - day);

        var year = now.getFullYear();       //年
        var month = now.getMonth() + 1;     //月
        var day = now.getDate();            //日

        var hh = now.getHours();            //时
        var mm = now.getMinutes();          //分
        var ss = now.getSeconds();           //秒

        var clock = year + "-";

        if (month < 10)
          clock += "0";

        clock += month + "-";

        if (day < 10)
          clock += "0";

        clock += day + " ";

        if (hh < 10)
          clock += "0";

        clock += hh + ":";
        if (mm < 10) clock += '0';
        clock += mm + ":";

        if (ss < 10) clock += '0';
        clock += ss;

        return (clock);
      },

      // 获取当前是星期几
      getWeekday() {
        var now = new Date();
        // getDay()返回0-6的数字，0是星期日，1-6是星期一到星期六
        var dayIndex = now.getDay();
        
        // 定义星期几的文字映射
        var weekdays = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
        
        // 根据索引返回对应的星期几
        return weekdays[dayIndex];
      },  

      // 选择时间
      selectTime(type, hour, day) {
        this.activeTimeType = type
        this.startTime = this.curentTime(hour, day)

        this.date = [this.curentTime(hour, day), this.endTime]

        let params = {
          deviceAddr: this.activeDevice.deviceAddr,
          nodeId: this.activeDevice.nodeId,
          startTime: this.startTime,
          endTime: this.endTime
        }
        this.getDeviceHistoryData(this.token, params)
      },

      // el-date-picker 监听更新
      dateChange() {
        this.activeTimeType = ''
        this.startTime = this.date[0]
        this.endTime = this.date[1]

        let params = {
          deviceAddr: this.activeDevice.deviceAddr,
          nodeId: this.activeDevice.nodeId,
          startTime: this.date[0],
          endTime: this.date[1]
        }
        this.getDeviceHistoryData(this.token, params)
      },

      // 链接 webSocket 
      connectWebSocket(token) {
        ws.init(
          `ws://iot.muu2.com/member`,
          token,
          data => {
            try {
              // console.log('websocet data : ', data);
            } catch (err) {
              this.$message.error(err)
            }
          },
          state => {
            console.log("state changed !");
          }
        )
      },

      // 点击设备
      clickSheBei(item) {
        if (item.name == '撒料车') {
          this.showSaLiaoChe = true

          // 开启 撒料车监控
          // this.playSLCMonitor1FLV(this.saLiaoCheMonitors[0])
          // this.playSLCMonitor2FLV(this.saLiaoCheMonitors[1])
          // this.playSLCMonitor3FLV(this.saLiaoCheMonitors[2])
          // this.playSLCMonitor4FLV(this.saLiaoCheMonitors[3])
          // this.playSLCMonitor5FLV(this.saLiaoCheMonitors[4])
          // this.playSLCMonitor6FLV(this.saLiaoCheMonitors[5])

          this.playSLCMonitor1FLV(this.saLiaoCheMonitors[5])

        } else if (item.name == '场景联动') {
          this.showChangJing = true

          // 获取场景联动 设备列表
          this.getSceneList()
        } else if (item.name == '配料系统') {
          this.showChuLiaoGuan = true
        } else if (item.name == '恒温饮水') {
          this.showYinShui = true
          this.timer = setInterval(() => {
            this.getHWYSDeviceStatus()
          }, 1000 * 2)
        } else if (item.name == '清粪机器人') {
          this.showQingFen = true

          // 开启 清粪监控
          // this.playQFJMonitor1FLV(this.qingFenJiMonitors[0])
          // this.playQFJMonitor2FLV(this.qingFenJiMonitors[1])
          
        } else if (item.name == '羊体称') {
          this.showYangCheng = true
          this.timer = setInterval(() => {
            this.getScaleList()
          }, 1000 * 2)
        } else if (item.name == '机器狗') {
          this.showJiQiGou = true
        } else if (item.name == '无人机') {
          this.showWuRenJi = true
        } 
      },

      // 监听 关闭恒温饮水 dialog
      cloneHWYSDialog() {
        clearInterval(this.timer)
        this.timer = null
      },




      // 获取 羊 体尺 记录 
      async getScaleList(params) {
        let res = await getScaleList(params) 
        try {
          this.cattleList = res.data
        } catch(err) {
          console.log('获取 羊 体尺 记录 失败 : ', err);
        }
      },





      // ----------------- 牧途智联 iot (牧途智联) -----------------
      async getMuu2ZLToken() {
        let params = {
          userName: "13904709077",
          password: "Blr123456"
        }

        let res = await getMuu2ZLToken(params)
        try {
          this.muu2ZLToken = res.result.token

          // 获取 牧途 iot 设备信息
          this.getAllDeviceInstanceListAndStatus(res.result.token)

          // 连接 牧途 iot websocket
          // await this.connectWebSocket(res.result.token)
        } catch(err) {
          console.log('获取 muu2ZL token 失败 : ', err);
        }
      },

      // 获取 muu2 智联 设备状态
      async getAllDeviceInstanceListAndStatus(token) {
        let params = {
          dashboard: 'device',
          dimension: 'history',
          measurement: 'properties',
          object: '1852196511687598080',
          params: {
            deviceId: "Q6d03bc3881825b6",
            history: 1,
            properties: ["output"]
          }
        }
        let res = await getAllDeviceInstanceListAndStatus(params, token)
        try {
          if (res.message == 'success') {
            // console.log('获取 muu2 智联 设备状态成功 : ', res);
            // this.muu2ZLDeviceStatus = res.result

            for (let item of res.result) {
              // 撒料车
              if (item.name == '撒料车') {  // 艾乐牧场-测试
                let prop_sta_output = item.propStatus.output
                if (prop_sta_output) {
                  this.sheBeiList1[0].isRun = prop_sta_output[prop_sta_output.length - 1] == '0' ? false : true
                }

                let deriveMetadata = JSON.parse(item.deriveMetadata)
                let zeroStr = item.propStatus.output

                for (let item2 of deriveMetadata.functions) {
                  let description_num = parseInt(item2.description)
                  
                  if (description_num - 1 <= zeroStr.length) {
                    item2['xxState'] = zeroStr[description_num - 1] == 0 ? false : true
                  }
                }

                // console.log('deriveMetadata : ', deriveMetadata);

                this.sheBeiList1[0].info = {
                  deviceId: item.id,
                  productId: item.productId,
                  deriveMetadata: deriveMetadata
                }

                // console.log('this.sheBeiList1[0].info : ', this.sheBeiList1[0].info);

                if (item.state.value == 'online') {
                  this.sheBeiList1[0].state = true
                }
              }

              // 传送带
              // if (item.name == '阿拉腾扎布-传送带') {  //扎布测试
              //   let deriveMetadata = JSON.parse(item.deriveMetadata)
              //   let zeroStr = item.propStatus.output

              //   for (let item2 of deriveMetadata.functions) {

              //     let description_num = parseInt(item2.description)
                  
              //     if (description_num - 1 <= zeroStr.length) {
              //       item2['xxState'] = zeroStr[description_num - 1] == 0 ? false : true
              //     }
              //   }

              //   // console.log('deriveMetadata : ', deriveMetadata);

              //   this.sheBeiList2[2].info = {
              //     deviceId: item.id,
              //     productId: item.productId,
              //     deriveMetadata: deriveMetadata
              //   }

              //   // console.log('this.sheBeiList2[2].info : ', this.sheBeiList2[2].info);

              //   if (item.state.value == 'online') {
              //     this.sheBeiList2[2].state = true
              //   }
              // }

              

              // 清粪
              if (item.name == '清粪车') {
                let prop_sta_output = item.propStatus.output
                if (prop_sta_output) {
                  this.sheBeiList1[2].isRun = prop_sta_output[prop_sta_output.length - 1] == '0' ? false : true
                }

                let deriveMetadata = JSON.parse(item.deriveMetadata)
                let zeroStr = item.propStatus.output

                for (let item2 of deriveMetadata.functions) {

                  let description_num = parseInt(item2.description)
                  
                  if (description_num - 1 <= zeroStr.length) {
                    item2['xxState'] = zeroStr[description_num - 1] == 0 ? false : true
                  }
                }

                // console.log('deriveMetadata : ', deriveMetadata);

                this.sheBeiList1[2].info = {
                  deviceId: item.id,
                  productId: item.productId,
                  deriveMetadata: deriveMetadata,
                }

                // console.log('this.sheBeiList1[2].info : ', this.sheBeiList1[2].info);

                if (item.state.value == 'online') {
                  this.sheBeiList1[2].state = true
                }
              }
            }
          }
        } catch(err) {
          console.log('获取 muu2 智联 设备状态失败 : ', err);
        }
      },

      // 控制 撒料车 继电器
      handleChangeSLCxxState(event, item, deviceId, productId, index) {
        // 打开对应的通道监控
        this.clickSLCRunMonitor(index)

        let params = {
          deviceId: deviceId,
          productId: productId,
          functionCode: item.id,
          functionValue: item.description,
          executeCode: null // open:开，close:关
        }

        // 控制 继电器
        this.invokedFunction(params, this.muu2ZLToken)
      },

      // 控制 清粪机 继电器
      handleChangeQFJxxState(event, item, deviceId, productId, index) {
        // 打开对应的通道监控
        this.clickQFJRunMonitor(index)
        
        let params = {
          deviceId: deviceId,
          productId: productId,
          functionCode: item.id,
          functionValue: item.description,
          executeCode: null // open:开，close:关
        }

        // 控制 搅拌机继电器
        this.invokedFunction(params, this.muu2ZLToken)
      },

      // 控制 传送带 继电器
      handleChangeCSDxxState(event, item, deviceId, productId, index) {
        let params = {
          deviceId: deviceId,
          productId: productId,
          functionCode: item.id,
          functionValue: item.description,
          executeCode: null // open:开，close:关
        }

        // 控制 搅拌机继电器
        this.invokedFunction(params, this.muu2ZLToken)
      },

      // -------------------- 播放 撒料车 flv 监控 1
      playSLCMonitor1FLV(url) {
        if (this.saLiaoCheMonitor1) {
          this.saLiaoCheMonitor1.pause();
          this.saLiaoCheMonitor1.unload();
          this.saLiaoCheMonitor1.destroy();
          this.saLiaoCheMonitor1 = null
        }

        this.saLiaoCheMonitor1 = flvjs.createPlayer({
          type: 'flv',
          url
        });

        var slcVideoElement1 = document.getElementById('slcVideoElement1');

        this.saLiaoCheMonitor1.attachMediaElement(slcVideoElement1);
        this.saLiaoCheMonitor1.load();
        this.saLiaoCheMonitor1.play();
      },
      // 播放 撒料车 flv 监控 2
      playSLCMonitor2FLV(url) {
        if (this.saLiaoCheMonitor2) {
          this.saLiaoCheMonitor2.pause();
          this.saLiaoCheMonitor2.unload();
          this.saLiaoCheMonitor2.destroy();
          this.saLiaoCheMonitor2 = null
        }

        this.saLiaoCheMonitor2 = flvjs.createPlayer({
          type: 'flv',
          url
        });

        var slcVideoElement2 = document.getElementById('slcVideoElement2');

        this.saLiaoCheMonitor2.attachMediaElement(slcVideoElement2);
        this.saLiaoCheMonitor2.load();
        this.saLiaoCheMonitor2.play();
      },
      // 播放 撒料车 flv 监控 3
      playSLCMonitor3FLV(url) {
        if (this.saLiaoCheMonitor3) {
          this.saLiaoCheMonitor3.pause();
          this.saLiaoCheMonitor3.unload();
          this.saLiaoCheMonitor3.destroy();
          this.saLiaoCheMonitor3 = null
        }

        this.saLiaoCheMonitor3 = flvjs.createPlayer({
          type: 'flv',
          url
        });

        var slcVideoElement3 = document.getElementById('slcVideoElement3');

        this.saLiaoCheMonitor3.attachMediaElement(slcVideoElement3);
        this.saLiaoCheMonitor3.load();
        this.saLiaoCheMonitor3.play();
      },
      // 播放 撒料车 flv 监控 4
      playSLCMonitor4FLV(url) {
        if (this.saLiaoCheMonitor4) {
          this.saLiaoCheMonitor4.pause();
          this.saLiaoCheMonitor4.unload();
          this.saLiaoCheMonitor4.destroy();
          this.saLiaoCheMonitor4 = null
        }

        this.saLiaoCheMonitor4 = flvjs.createPlayer({
          type: 'flv',
          url
        });

        var slcVideoElement4 = document.getElementById('slcVideoElement4');

        this.saLiaoCheMonitor4.attachMediaElement(slcVideoElement4);
        this.saLiaoCheMonitor4.load();
        this.saLiaoCheMonitor4.play();
      },
      // 播放 撒料车 flv 监控 5
      playSLCMonitor5FLV(url) {
        if (this.saLiaoCheMonitor5) {
          this.saLiaoCheMonitor5.pause();
          this.saLiaoCheMonitor5.unload();
          this.saLiaoCheMonitor5.destroy();
          this.saLiaoCheMonitor5 = null
        }

        this.saLiaoCheMonitor5 = flvjs.createPlayer({
          type: 'flv',
          url
        });

        var slcVideoElement5 = document.getElementById('slcVideoElement5');

        this.saLiaoCheMonitor5.attachMediaElement(slcVideoElement5);
        this.saLiaoCheMonitor5.load();
        this.saLiaoCheMonitor5.play();
      },
      // 播放 撒料车 flv 监控 6
      playSLCMonitor6FLV(url) {
        if (this.saLiaoCheMonitor6) {
          this.saLiaoCheMonitor6.pause();
          this.saLiaoCheMonitor6.unload();
          this.saLiaoCheMonitor6.destroy();
          this.saLiaoCheMonitor6 = null
        }

        this.saLiaoCheMonitor6 = flvjs.createPlayer({
          type: 'flv',
          url
        });

        var slcVideoElement6 = document.getElementById('slcVideoElement6');

        this.saLiaoCheMonitor6.attachMediaElement(slcVideoElement6);
        this.saLiaoCheMonitor6.load();
        this.saLiaoCheMonitor6.play();
      },

      // 点击 撒料车 监控
      clickSLCRunMonitor(index) {
        this.activeSLCMonitorIndex = index

        if (this.saLiaoCheMonitor1) {
          this.saLiaoCheMonitor1.pause();
          this.saLiaoCheMonitor1.unload();
          this.saLiaoCheMonitor1.destroy();
          this.saLiaoCheMonitor1 = null
        }

        this.saLiaoCheMonitor1 = flvjs.createPlayer({
          type: 'flv',
          url: this.saLiaoCheMonitors[index]
        });

        var slcVideoElement1 = document.getElementById('slcVideoElement1');

        this.saLiaoCheMonitor1.attachMediaElement(slcVideoElement1);
        this.saLiaoCheMonitor1.load();
        this.saLiaoCheMonitor1.play();
      },




      // --------------------- 播放 清粪机 flv 监控 1
      playQFJMonitor1FLV(url) {
        if (this.qingFenJiMonitor1) {
          this.qingFenJiMonitor1.pause();
          this.qingFenJiMonitor1.unload();
          this.qingFenJiMonitor1.destroy();
          this.qingFenJiMonitor1 = null
        }

        this.qingFenJiMonitor1 = flvjs.createPlayer({
          type: 'flv',
          url
        });

        var qfVideoElement1 = document.getElementById('qfVideoElement1');

        this.qingFenJiMonitor1.attachMediaElement(qfVideoElement1);
        this.qingFenJiMonitor1.load();
        this.qingFenJiMonitor1.play();
      },

      // 播放 清粪机 flv 监控 2
      playQFJMonitor2FLV(url) {
        if (this.qingFenJiMonitor2) {
          this.qingFenJiMonitor2.pause();
          this.qingFenJiMonitor2.unload();
          this.qingFenJiMonitor2.destroy();
          this.qingFenJiMonitor2 = null
        }

        this.qingFenJiMonitor2 = flvjs.createPlayer({
          type: 'flv',
          url
        });

        var qfVideoElement2 = document.getElementById('qfVideoElement2');

        this.qingFenJiMonitor2.attachMediaElement(qfVideoElement2);
        this.qingFenJiMonitor2.load();
        this.qingFenJiMonitor2.play();
      },

      // 点击 清粪机 监控
      clickQFJRunMonitor(index) {
        this.activeQFJMonitorIndex = index

        if (this.qingFenJiMonitor1) {
          this.qingFenJiMonitor1.pause();
          this.qingFenJiMonitor1.unload();
          this.qingFenJiMonitor1.destroy();
          this.qingFenJiMonitor1 = null
        }

        this.qingFenJiMonitor1 = flvjs.createPlayer({
          type: 'flv',
          url: this.qingFenJiMonitors[index]
        });

        var qfVideoElement1 = document.getElementById('qfVideoElement1');

        this.qingFenJiMonitor1.attachMediaElement(qfVideoElement1);
        this.qingFenJiMonitor1.load();
        this.qingFenJiMonitor1.play();
      },

      // 控制设备
      handleChangeHardware(event, item) {

      },

      // 控制 继电器
      async invokedFunction(params, token) {
        let res = await invokedFunction(params, token)
        try {
          // 如果设备 控制 成功 => 更新 shebeiList 中的 state
          if (res.status == '200') {
            Message({
              message: '控制成功',
              type: 'success',
              duration: 2 * 1000
            })
          }
        } catch(err) {
           Message({
              message: '控制失败',
              type: 'error',
              duration: 2 * 1000
            })
          console.log('控制设备失败 : ', err);
        }

        // 重新获取 iot 设备状态
        this.getAllDeviceInstanceListAndStatus(this.muu2ZLToken)
      },

      // 获取 场景列表
      async getSceneList() {
        let res = await getSceneList(this.muu2ZLToken)
        try {
          if (res.message == 'success') {
            this.sceneList = res.result
          }
        } catch(err) {
          console.log('获取 场景列表 失败 : ', err);
        }
      },

      // 点击 【场景联动】 dialog 设备检测 中的 item
      clickCJLDSheBei(item) {
        this.activeCJLDSheBei = item
      },




      // ----------------------- 恒温饮水 状态 -----------------------
      async getHWYSDeviceStatus() {
        let res = await getHWYSDeviceStatus()
        try {
          if (res.code == 1000) {
            let jsonData = JSON.parse(res.data)
            this.hwysState = jsonData.data
          }
        } catch(err) {
          console.log('获取 恒温饮水 状态失败 : ', err);
        }
      },


      // 初始化数据
      initChart() {
        this.data1 = {
          title: '',
          unit: '',
          data: [
            {"name": "青储", "value": 50, "unit": ''},
            {"name": "干草", "value": 20, "unit": ''},
            {"name": "精饲料", "value": 30, "unit": ''}
          ]
        }

        this.lineData = {
          unit: 'KG',
          x: ['1月', '2月', '3月', '4月', '5月', '6月', '7月'],
          y: [500, 600, 630, 610, 550, 560, 510]
        }
        this.lineData2 = {
          unit: 'KG',
          x: ['1月', '2月', '3月', '4月', '5月', '6月'],
          y: [230, 220, 230, 210, 200, 180]
        }
        this.lineData3 = {
          unit: 'KG',
          x: ['1月', '2月', '3月', '4月', '5月', '6月'],
          y: [100, 120, 130, 110, 120, 120]
        }
        this.lineData4 = {
          unit: 'KG',
          x: ['1月', '2月', '3月', '4月', '5月', '6月'],
          y: [200, 210, 230, 210, 200, 190]
        }

        this.data2 = {
          x: ['一季度', '二季度', '三季度', '四季度'],
          data1: {
            name: '回收碳',
            data: [41, 46, 38, 27]
          },
          data2: {
            name: '转换肥料',
            data: [19, 16, 18, 17]
          },
        }

        this.data3 = {
          x: ['一季度', '二季度', '三季度', '四季度'],
          data1: {
            name: '干',
            data: [159, 146, 138, 154]
          },
          data2: {
            name: '湿',
            data: [109, 96, 58, 67]
          },
        }
      },

      // 点击 饲料消耗的 饲料类别
      changeChart1CategoryType(type, time) {
        this.chart_1_category_type = type

        if (type == 1) {
          if (time == 'year') {
            this.lineData = {
              unit: 'KG',
              x: ['2022 年', '2023 年', '2024 年'],
              y: [7832, 8124, 7782, 3487]
            }
          }
          if (time == 'month') {
            this.lineData = {
              unit: 'KG',
              x: ['1月', '2月', '3月', '4月', '5月', '6月', '7月'],
              y: [500, 600, 630, 610, 550, 560, 510]
            }
          }
          if (time == 'day') {
            this.lineData = {
              unit: 'KG',
              x: ['08-20', '08-21', '08-22', '08-23', '08-24', '08-25', '08-26'],
              y: [40, 45, 48, 52, 50, 55, 58]
            }
          }
        }
        if (type == 2) {
          if (time == 'year') {
            this.lineData = {
              unit: 'KG',
              x: ['2022 年', '2023 年', '2024 年', '2025年'],
              y: [3452, 3424, 3482, 1425]
            }
          }
          if (time == 'month') {
            this.lineData = {
              unit: 'KG',
              x: ['1月', '2月', '3月', '4月', '5月', '6月', '7月'],
              y: [124, 143, 138, 129, 134, 130, 132]
            }
          }
          if (time == 'day') {
            this.lineData = {
              unit: 'KG',
              x: ['08-20', '08-21', '08-22', '08-23', '08-24', '08-25', '08-26'],
              y: [40, 45, 48, 52, 50, 55, 58]
            }
          }
        }
        if (type == 3) {
          if (time == 'year') {
            this.lineData = {
              unit: 'KG',
              x: ['2022 年', '2023 年', '2024 年', '2025年'],
              y: [2465, 2409, 2417, 2425]
            }
          }
          if (time == 'month') {
            this.lineData = {
              unit: 'KG',
              x: ['1月', '2月', '3月', '4月', '5月', '6月', '7月'],
              y: [109, 118, 112, 119, 124, 102, 121]
            }
          }
          if (time == 'day') {
            this.lineData = {
              unit: 'KG',
              x: ['08-20', '08-21', '08-22', '08-23', '08-24', '08-25', '08-26'],
              y: [36, 40, 38, 40, 39, 42, 38]
            }
          }
        }
        if (type == 4) {
          if (time == 'year') {
            this.lineData = {
              unit: 'KG',
              x: ['2022 年', '2023 年', '2024 年', '2025年'],
              y: [573, 683, 598, 262]
            }
          }
          if (time == 'month') {
            this.lineData = {
              unit: 'KG',
              x: ['1月', '2月', '3月', '4月', '5月', '6月', '7月'],
              y: [24, 26, 12, 0, 0, 0, 0]
            }
          }
          if (time == 'day') {
            this.lineData = {
              unit: 'KG',
              x: ['08-20', '08-21', '08-22', '08-23', '08-24', '08-25', '08-26'],
              y: [0, 0, 0, 0, 0, 0, 0]
            }
          }
        }
      },

       // 点击 饲料消耗的 时间
      changeChart1TimeType(type, time) {
        this.chart_1_time = time
        this.changeChart1CategoryType(type, time)
      },



      generateIncreasingRandomNumbers(min, max) {
        const result = [];
        
        for (let i = 0; i < 7; i++) {
            // 计算剩余可用范围
            const remainingNumbers = 6 - i;
            const availableRange = max - min - (remainingNumbers - 1);
            
            // 确保有足够的空间生成后续数字
            if (availableRange <= 0) {
                throw new Error("无法生成足够的随机数");
            }
            
            // 生成当前随机数
            const randomNum = min + Math.floor(Math.random() * availableRange);
            result.push(randomNum.toFixed(1));
            
            // 更新下一次的最小值
            min = randomNum + 1;
        }
        
        return result;
      },

      // 跟据 牲畜体重 计算 成长记录
      formatCattleGrowData(cattle_weight) {
        let cattleGrowData = {
          unit: 'KG',
          x: ['1月', '2月', '3月', '4月', '5月', '6月', '7月',],
          y: this.generateIncreasingRandomNumbers(cattle_weight-15, cattle_weight)
        }

        return cattleGrowData
      },

      // 点击 【成长记录】【防疫记录】【育种记录】【交易记录】
      handleClickRecordName(cattle_index, record_index) {
        this.active_cattle_index = cattle_index
        this.active_records_index = this.active_records_index == record_index ? null : record_index
      },

      // 格式化手机号 175 **** 4435
      formatPhone(val) {
        if (val) {
          return val.substring(0, 3) + '****' + val.substring(7, 12)
        }
      },

      // 格式化身份证号 152 **** 4435
      formatIdNum(val) {
        if (val) {
          return val.substring(0, 6) + '****' + val.substring(14)
        }
      },

      // 查看 谱系档案 基本信息
      goToSheepDetail(item) {
        // this.$router.push(`/sheepDetail/${item.id}/${item.rfid}/null`)
      },

      clickSheep(item) {
        this.showDangAn = true

        this.iframeName= item.id
        this.showIframne = true

        this.iframeSrc = `https://dsj.dayaar.com.cn/xmy-bigscreen/#/sheepDetailFarm/${item.id}/${item.rfid}/阿拉腾扎布`

        // document.getElementById('pxiframe').contentWindow.location.reload(true);
        // document.querySelector('#pxiframe').contentWindow.frameWindow.location.reload()
      },

      closeIframe() {
        this.showIframne = false
      },
      closeYangCheng() {
        clearInterval(this.timer)
        this.timer = null
      },

      // 点击饲料统计
      clickSiLiaoBox() {
        // this.showSiLiao = true
        // this.sentBtn = 5
      },

      // 关闭 撒料 dialog
      hideSaLiaoCheDialog() {
        this.showSaLiaoChe = false

        // 销毁 监控 实例
        if (this.saLiaoCheMonitor1) {
          this.saLiaoCheMonitor1.pause();
          this.saLiaoCheMonitor1.unload();
          this.saLiaoCheMonitor1.destroy();
          this.saLiaoCheMonitor1 = null
        }
        if (this.saLiaoCheMonitor2) {
          this.saLiaoCheMonitor2.pause();
          this.saLiaoCheMonitor2.unload();
          this.saLiaoCheMonitor2.destroy();
          this.saLiaoCheMonitor2 = null
        }
        if (this.saLiaoCheMonitor3) {
          this.saLiaoCheMonitor3.pause();
          this.saLiaoCheMonitor3.unload();
          this.saLiaoCheMonitor3.destroy();
          this.saLiaoCheMonitor3 = null
        }
        if (this.saLiaoCheMonitor4) {
          this.saLiaoCheMonitor4.pause();
          this.saLiaoCheMonitor4.unload();
          this.saLiaoCheMonitor4.destroy();
          this.saLiaoCheMonitor4 = null
        }
        if (this.saLiaoCheMonitor5) {
          this.saLiaoCheMonitor5.pause();
          this.saLiaoCheMonitor5.unload();
          this.saLiaoCheMonitor5.destroy();
          this.saLiaoCheMonitor5 = null
        }
        if (this.saLiaoCheMonitor6) {
          this.saLiaoCheMonitor6.pause();
          this.saLiaoCheMonitor6.unload();
          this.saLiaoCheMonitor6.destroy();
          this.saLiaoCheMonitor6 = null
        }
      },

      // 关闭清粪 dialog
      hideFingFenDialog() {
        this.showQingFen = false

        // 销毁 监控 实例
        if (this.qingFenJiMonitor1) {
          this.qingFenJiMonitor1.pause();
          this.qingFenJiMonitor1.unload();
          this.qingFenJiMonitor1.destroy();
          this.qingFenJiMonitor1 = null
        }
        if (this.qingFenJiMonitor2) {
          this.qingFenJiMonitor2.pause();
          this.qingFenJiMonitor2.unload();
          this.qingFenJiMonitor2.destroy();
          this.qingFenJiMonitor2 = null
        }
      },

      // 关闭场景联动 dialog
      hideChangJingDialog() {
        this.showChangJing = false
      },

      // 销毁 撒料车 清粪机 监控
      distroyMonitor() {
        // 销毁 撒料机的监控
        if (this.saLiaoCheMonitor1) {
          this.saLiaoCheMonitor1.pause();
          this.saLiaoCheMonitor1.unload();
          this.saLiaoCheMonitor1.destroy();
          this.saLiaoCheMonitor1 = null
        }
        if (this.saLiaoCheMonitor2) {
          this.saLiaoCheMonitor2.pause();
          this.saLiaoCheMonitor2.unload();
          this.saLiaoCheMonitor2.destroy();
          this.saLiaoCheMonitor2 = null
        }
        if (this.saLiaoCheMonitor3) {
          this.saLiaoCheMonitor3.pause();
          this.saLiaoCheMonitor3.unload();
          this.saLiaoCheMonitor3.destroy();
          this.saLiaoCheMonitor3 = null
        }
        if (this.saLiaoCheMonitor4) {
          this.saLiaoCheMonitor4.pause();
          this.saLiaoCheMonitor4.unload();
          this.saLiaoCheMonitor4.destroy();
          this.saLiaoCheMonitor4 = null
        }
        if (this.saLiaoCheMonitor5) {
          this.saLiaoCheMonitor5.pause();
          this.saLiaoCheMonitor5.unload();
          this.saLiaoCheMonitor5.destroy();
          this.saLiaoCheMonitor5 = null
        }
        if (this.saLiaoCheMonitor6) {
          this.saLiaoCheMonitor6.pause();
          this.saLiaoCheMonitor6.unload();
          this.saLiaoCheMonitor6.destroy();
          this.saLiaoCheMonitor6 = null
        }


        // 销毁 清粪机的监控
        if (this.qingFenJiMonitor1) {
          this.qingFenJiMonitor1.pause();
          this.qingFenJiMonitor1.unload();
          this.qingFenJiMonitor1.destroy();
          this.qingFenJiMonitor1 = null
        }
        if (this.qingFenJiMonitor2) {
          this.qingFenJiMonitor2.pause();
          this.qingFenJiMonitor2.unload();
          this.qingFenJiMonitor2.destroy();
          this.qingFenJiMonitor2 = null
        }
      },

      back() {
        this.$router.back()
      },
    }
  }
</script>

<style lang="less" scoped>
  .chart_box {
    background-color: #202836;
    border-radius: 5px;
    padding: 5px
  }

  .chart_title_text { 
    width: 100%; height: 30; line-height: 30px; 
    color: #bdaa9c; 
    font-size: 15px;
    letter-spacing: 2px; 
    font-weight: bold; 
    background: none; 
    padding-left: 10px; 
  }

  // 标题
  .box_title { font-size: 20px; font-weight: bold; color: rgb(255, 200, 0); position: absolute; }
</style>

<style lang="less">
   .select_muhu {
    .el-select-dropdown {
      border: none;
      background-color: #131823;
      border: 2px solid #CCB7A6;
    }
    /* 输入框 */
    .el-input__inner{
      color: #CCB7A6 !important;
      border: 2px solid #CCB7A6;
      background-color: #131823;
      border-radius: 10px;
    }
    /* 聚焦时的样式 */
    .el-select .el-input.is-focus .el-input__inner{
      border: 2px solid #CCB7A6;
      background-color: #131823;
      color:#CCB7A6;
    }
    /* 下拉框选中 */
    .el-select-dropdown__item{
      color: #CCB7A6;
      border: 2px solid #CCB7A6 !important;
      background-color: #131823;
    }
    /* 鼠标经过下拉框 */
    .el-select-dropdown__item.hover, 
    .el-select-dropdown__item:hover {
      color:#CCB7A6;
      background-color: #131823;
    }
  }

  .el-dialog { background-color: #3D4454 !important; }
  .el-dialog__title { color: #fff !important; }
  .el-dialog__body { padding-top: 10px !important; }
</style>